vastgrid 0.1.1 → 0.2.1

package/dist/styles.css

@@ -1,13 +1,24 @@
 /*
- * 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`.
+ * 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().
  */
+
+/*
+ * The grid follows the system's light or dark mode; `.vg-root { color-scheme: light }` keeps it light. It is
+ * declared here, without specificity, because bundlers that turn light-dark() into variables for older browsers
+ * (Lightning CSS, which Vite uses) need a `color-scheme` declaration to set them: without one, every color is
+ * invalid and the canvas draws black.
+ */
+:where(.vg-root) {
+  color-scheme: light dark;
+}
+
 .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-group-header-height: 24px;
   --vg-radius: 6px;
   --vg-bg: light-dark(#ffffff, #16161a);
   --vg-fg: light-dark(#1f2328, #e6e6eb);
@@ -28,13 +39,19 @@
   --vg-active-border: light-dark(#0b57d0, #8ab4f8);
   --vg-accent: light-dark(#0b57d0, #8ab4f8);
   --vg-accent-fg: light-dark(#ffffff, #0d1b33);
+  --vg-checked-row-bg: light-dark(rgb(11 87 208 / 6%), rgb(138 180 248 / 9%));
   --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-link-fg: light-dark(#0b57d0, #8ab4f8);
   --vg-focus: light-dark(#0b57d0, #8ab4f8);
   --vg-shadow: 0 8px 28px light-dark(rgb(31 35 40 / 18%), rgb(0 0 0 / 50%));
+  /* The detail panel: its width beside the grid, its height below a grid narrower than 640px. */
+  --vg-detail-width: 340px;
+  --vg-detail-height: 45%;
 
+  container: vg-root / inline-size;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -152,6 +169,24 @@
   text-overflow: ellipsis;
 }
 
+.vg-statusbar__failed {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.vg-statusbar__error {
+  overflow: hidden;
+  color: var(--vg-error-fg);
+  text-overflow: ellipsis;
+}
+
+.vg-statusbar__unsaved {
+  color: var(--vg-fg);
+  font-variant-numeric: tabular-nums;
+}
+
 .vg-statusbar__summary {
   display: flex;
   gap: 14px;
@@ -205,490 +240,635 @@
   outline-offset: -1px;
 }
 
-.vg-input:disabled {
-  opacity: 0.6;
-}
-
-.vg-button,
-.vg-icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.vg-button {
   min-height: 28px;
-  padding: 3px 10px;
+  padding: 3px 12px;
   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);
+  cursor: pointer;
 }
 
-.vg-icon-button {
-  min-width: 28px;
-  padding: 0 6px;
-  border-color: transparent;
-  background: transparent;
+.vg-button:disabled {
+  color: var(--vg-muted);
+  cursor: default;
 }
 
-.vg-button:hover:not(:disabled),
-.vg-icon-button:hover:not(:disabled) {
-  background: var(--vg-header-active-bg);
+/* The export menu: a popover under its button. */
+
+.vg-menu {
+  position: fixed;
+  inset: auto;
+  min-width: 200px;
+  margin: 0;
+  padding: 6px;
+  color: var(--vg-fg);
+  font: inherit;
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: var(--vg-radius);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
 }
 
-.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-menu__group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 6px;
+  padding: 2px 4px 8px;
+  border: none;
+  border-bottom: 1px solid var(--vg-line);
 }
 
-.vg-button:disabled {
-  cursor: default;
-  opacity: 0.55;
+.vg-menu__group label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
 }
 
-.vg-button--small {
-  min-height: 26px;
-  padding: 2px 8px;
+.vg-menu__item {
+  display: block;
+  width: 100%;
+  padding: 5px 8px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: var(--vg-radius);
+  cursor: pointer;
 }
 
-.vg-button--primary {
-  color: var(--vg-accent-fg);
-  background: var(--vg-accent);
-  border-color: var(--vg-accent);
+.vg-menu__item:hover,
+.vg-menu__item:focus-visible {
+  background: var(--vg-line);
+  outline: none;
 }
 
-.vg-button--primary:hover:not(:disabled) {
-  background: var(--vg-accent);
-  filter: brightness(1.08);
+/* The formula menu: a row per derived column, then one for a new column. */
+
+.vg-formulas {
+  width: min(640px, calc(100vw - 16px));
 }
 
-.vg-chip {
-  display: inline-flex;
+.vg-formulas__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   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;
+  padding: 4px 2px;
 }
 
-.vg-chip > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vg-formulas__row + .vg-formulas__row {
+  border-top: 1px solid var(--vg-line);
 }
 
-.vg-chip--filter {
-  border-color: var(--vg-accent);
+.vg-formulas__name {
+  flex: 0 1 9em;
+  min-width: 6em;
 }
 
-.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-formulas__formula {
+  flex: 1 1 16em;
+  min-width: 10em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
-.vg-chip__remove:hover {
-  color: var(--vg-fg);
-  background: var(--vg-header-active-bg);
+.vg-formulas__error {
+  flex-basis: 100%;
+  margin: 0;
+  color: var(--vg-error-fg);
+}
+
+.vg-button:focus-visible {
+  outline: 2px solid var(--vg-focus);
+  outline-offset: 1px;
 }
 
-/* Messages over the grid */
+/* The cell editor: in the page while no cell is edited, so that typing moves into it (§6.5 of the specification). */
 
-.vg-message {
+.vg-editor {
   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;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
 }
 
-.vg-message button {
+.vg-editor[data-open] {
+  z-index: 2;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  opacity: 1;
   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);
+.vg-editor-input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: inherit;
+  max-width: min(640px, 80vw);
+  height: var(--vg-editor-height, var(--vg-row-height));
+  min-height: var(--vg-editor-height, var(--vg-row-height));
+  max-height: 240px;
+  margin: 0;
+  padding: 3px 7px;
+  color: var(--vg-fg);
+  font: inherit;
+  line-height: 1.35;
+  white-space: pre-wrap;
+  resize: none;
+  background: var(--vg-surface);
+  border: 2px solid var(--vg-active-border);
+  border-radius: 0;
+  outline: none;
   box-shadow: var(--vg-shadow);
-  transform: translateX(-50%);
-  pointer-events: none;
 }
 
-/* Find */
+.vg-editor[data-invalid] .vg-editor-input {
+  border-color: var(--vg-error-fg);
+}
 
-.vg-find {
-  position: absolute;
-  top: calc(var(--vg-header-height) + 6px);
-  right: 18px;
-  z-index: 3;
+.vg-editor-note {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 2px;
-  padding: 4px;
+  max-width: min(420px, 80vw);
+  padding: 4px 8px;
+  color: var(--vg-muted);
+  font-size: 0.88em;
   background: var(--vg-surface);
   border: 1px solid var(--vg-border);
-  border-radius: var(--vg-radius);
+  border-top: none;
   box-shadow: var(--vg-shadow);
 }
 
-.vg-find .vg-input {
-  width: 200px;
+.vg-editor-error {
+  color: var(--vg-error-fg);
 }
 
-.vg-find__status {
-  min-width: 0;
-  padding: 0 4px;
-  color: var(--vg-muted);
-  font-size: 0.92em;
-  white-space: nowrap;
+/* The accessibility rows (§6.4 of react.md): over the cells they stand for, drawn by the canvas instead. */
+
+.vg-a11y {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 0;
+  height: 0;
+  color: transparent;
+  pointer-events: none;
 }
 
-.vg-find__case {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 4px;
-  color: var(--vg-muted);
-  cursor: pointer;
+.vg-a11y [role="gridcell"],
+.vg-a11y [role="columnheader"] {
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-/* Popovers, menus and panels */
+/* The first rows as HTML, which the server sends in place of the canvas (§7 of react.md). */
 
-.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-static {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.vg-static th,
+.vg-static td {
+  height: var(--vg-row-height);
+  max-width: 360px;
+  padding: 0 8px;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-right: 1px solid var(--vg-line);
+  border-bottom: 1px solid var(--vg-line);
 }
 
-.vg-popover--panel {
-  width: 300px;
-  padding: 10px;
+.vg-static th {
+  height: var(--vg-header-height);
+  font-weight: 600;
+  background: var(--vg-header-bg);
+  border-bottom-color: var(--vg-line-strong);
 }
 
-.vg-popover--wide {
-  width: min(560px, calc(100% - 8px));
+.vg-static .vg-static__number {
+  text-align: right;
 }
 
-.vg-menu {
-  padding: 4px;
+@media (prefers-reduced-motion: reduce) {
+  .vg-root * {
+    animation-duration: 0s;
+    transition-duration: 0s;
+  }
 }
 
-.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);
+/* The column menu: a popover at its header, with the filter of the column. */
+
+.vg-column-menu {
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 16px));
 }
 
-.vg-menu__item:hover:not(:disabled),
-.vg-menu__item:focus-visible {
-  background: var(--vg-header-active-bg);
+.vg-menu__item[aria-checked="true"]::before {
+  content: "✓ ";
 }
 
 .vg-menu__item:disabled {
+  color: var(--vg-muted);
   cursor: default;
-  opacity: 0.5;
 }
 
-.vg-menu__item[aria-checked="true"]::after {
-  content: "✓";
-  color: var(--vg-accent);
+.vg-menu__line {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid var(--vg-line);
+}
+
+.vg-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px;
+}
+
+.vg-filter__title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.vg-filter__values {
+  min-width: 0;
+  max-height: 240px;
+  margin: 0;
+  padding: 4px;
+  overflow: auto;
+  border: 1px solid var(--vg-line);
+  border-radius: var(--vg-radius);
 }
 
-.vg-menu__item kbd {
+.vg-filter__value {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 2px 0;
+}
+
+.vg-filter__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.vg-filter__count {
   color: var(--vg-muted);
-  font: inherit;
-  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
 }
 
-.vg-menu__separator {
-  margin: 4px 6px;
+.vg-filter__condition {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
   border: none;
-  border-top: 1px solid var(--vg-line);
 }
 
-.vg-panel__title {
-  margin: 0 0 8px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
+.vg-filter__condition legend {
+  margin-bottom: 4px;
 }
 
-.vg-panel__muted {
-  margin: 6px 0 0;
+.vg-filter__note {
+  margin: 0;
   color: var(--vg-muted);
-  font-weight: 400;
 }
 
-.vg-panel__error {
-  margin: 6px 0 0;
+.vg-filter__error {
+  margin: 0;
   color: var(--vg-error-fg);
 }
 
-.vg-panel__actions {
+.vg-filter__actions {
   display: flex;
-  justify-content: flex-end;
   gap: 6px;
-  margin-top: 10px;
+  justify-content: flex-end;
 }
 
-.vg-filter,
-.vg-columns {
+.vg-button--primary {
+  color: var(--vg-accent-fg);
+  background: var(--vg-accent);
+  border-color: var(--vg-accent);
+}
+
+/* Column statistics, in the column menu. */
+
+.vg-statistics__list {
+  display: grid;
+  gap: 2px;
+  margin: 6px 0 0;
+}
+
+.vg-statistics__list div {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.vg-statistics__list dt {
+  color: var(--vg-muted);
+}
+
+.vg-statistics__list dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The group menu: the keys and the measures of the groups. */
+
+.vg-groups {
+  width: min(360px, calc(100vw - 16px));
+}
+
+.vg-groups__part {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  margin: 0 0 8px;
+  padding: 0;
+  border: none;
 }
 
-.vg-filter > .vg-input,
-.vg-columns > .vg-input {
-  width: 100%;
+.vg-groups__part legend {
+  margin-bottom: 4px;
+  font-weight: 600;
 }
 
-.vg-filter__values {
-  min-inline-size: 0;
-  max-height: 260px;
+.vg-groups__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
   margin: 0;
   padding: 0;
-  overflow: auto;
+  list-style: none;
+}
+
+.vg-groups__list li {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 1px 2px 1px 8px;
+  background: var(--vg-surface-muted);
   border: 1px solid var(--vg-line);
   border-radius: var(--vg-radius);
 }
 
-.vg-check {
+.vg-groups__add {
   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-groups__add .vg-input {
+  flex: 1;
+  min-width: 0;
 }
 
-.vg-check--all {
-  border-bottom: 1px solid var(--vg-line);
+.vg-button--small {
+  min-height: 22px;
+  padding: 0 6px;
 }
 
-.vg-check__label {
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* The columns menu: each column of the view, shown or hidden, with buttons that move it. */
+
+.vg-columns {
+  width: min(320px, calc(100vw - 16px));
 }
 
-.vg-check__count {
-  flex: none;
-  color: var(--vg-muted);
-  font-variant-numeric: tabular-nums;
+.vg-columns__list {
+  max-height: 320px;
+  margin: 6px 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
 }
 
-.vg-filter__condition {
+.vg-columns__item {
   display: flex;
-  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 2px 0;
+}
+
+.vg-columns__item label {
+  display: flex;
+  flex: 1;
   gap: 6px;
-  margin: 4px 0 0;
+  align-items: center;
+  min-width: 0;
+}
+
+/* The conditions menu: groups of conditions, nested. */
+
+.vg-conditions {
+  width: min(640px, calc(100vw - 16px));
+  max-height: min(70vh, 600px);
+  overflow: auto;
+}
+
+.vg-conditions__group {
+  margin: 0 0 6px;
+  padding: 6px 8px;
+  border: 1px solid var(--vg-line);
+  border-radius: var(--vg-radius);
+}
+
+.vg-conditions__group--top {
   padding: 0;
   border: none;
 }
 
-.vg-filter__condition legend {
-  margin-bottom: 4px;
+.vg-conditions__items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 4px 0;
   padding: 0;
-  color: var(--vg-muted);
+  list-style: none;
 }
 
-.vg-filter__condition .vg-input {
-  flex: 1 1 120px;
+.vg-conditions__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.vg-conditions__row .vg-input {
+  flex: 1 1 8em;
   min-width: 0;
 }
 
-.vg-stats__list {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 3px 12px;
-  margin: 0;
+.vg-conditions__expression {
+  flex: 1;
+  overflow-wrap: anywhere;
 }
 
-.vg-stats__list dt {
-  color: var(--vg-muted);
+.vg-conditions__add {
+  display: flex;
+  gap: 4px;
 }
 
-.vg-stats__list dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
+/* A column's format, in the column menu. */
+
+.vg-format {
+  max-height: min(70vh, 560px);
+  overflow: auto;
 }
 
-.vg-stats__histogram,
-.vg-stats__top {
-  margin: 12px 0 0;
+.vg-column-menu:has(.vg-format) {
+  max-width: min(420px, calc(100vw - 16px));
 }
 
-.vg-stats__histogram figcaption,
-.vg-stats__top figcaption {
-  margin-bottom: 6px;
-  color: var(--vg-muted);
+.vg-format__field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.vg-stats__bars {
+.vg-format__group {
   display: flex;
-  align-items: flex-end;
-  gap: 1px;
-  height: 64px;
-  border-bottom: 1px solid var(--vg-line-strong);
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--vg-line);
+  border-radius: var(--vg-radius);
 }
 
-.vg-stats__bar {
-  flex: 1 1 0;
-  min-width: 2px;
-  background: var(--vg-accent);
-  border-radius: 2px 2px 0 0;
-  opacity: 0.8;
+.vg-format__rule {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--vg-line);
 }
 
-.vg-stats__axis {
+/* The grid's body and the detail panel beside it. */
+
+.vg-main {
   display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 2px;
-  color: var(--vg-muted);
-  font-size: 0.85em;
-  font-variant-numeric: tabular-nums;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.vg-stats__top ul {
+.vg-main > .vg-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vg-detail {
   display: flex;
+  flex: 0 0 min(var(--vg-detail-width), 50%);
   flex-direction: column;
-  gap: 2px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  min-height: 0;
+  overflow: auto;
+  border-left: 1px solid var(--vg-border);
+  background: var(--vg-surface);
 }
 
-.vg-stats__top li {
-  position: relative;
+.vg-detail__header {
+  position: sticky;
+  top: 0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 2px 6px;
+  padding: 6px 8px 6px 12px;
+  background: var(--vg-surface);
+  border-bottom: 1px solid var(--vg-line);
 }
 
-.vg-stats__top-bar {
-  position: absolute;
-  inset: 0 auto 0 0;
-  background: var(--vg-selection-bg);
-  border-radius: 3px;
+.vg-detail__title {
+  margin: 0;
+  font-size: inherit;
+  font-weight: 600;
 }
 
-.vg-stats__top-label {
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vg-detail__list {
+  margin: 0;
+  padding: 6px 12px 12px;
 }
 
-.vg-stats__top-count {
-  position: relative;
+.vg-detail__item {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--vg-line);
+}
+
+.vg-detail__item dt {
   color: var(--vg-muted);
-  font-variant-numeric: tabular-nums;
+  font-size: 0.9em;
 }
 
-.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;
+.vg-detail__item dd {
+  margin: 2px 0 0;
   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;
+@container vg-root (max-width: 640px) {
+  .vg-main {
+    flex-direction: column;
   }
 
-  .vg-progress > span[data-indeterminate] {
-    left: 0;
-    width: 100%;
-    opacity: 0.5;
-    animation: none;
+  .vg-detail {
+    flex-basis: var(--vg-detail-height);
+    border-top: 1px solid var(--vg-border);
+    border-left: 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;
-  }
+/* The find bar (⌘F), under the toolbar. */
+
+.vg-find {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--vg-line);
+}
+
+.vg-find__input {
+  flex: 1 1 12em;
+  min-width: 8em;
+}
+
+.vg-find__status {
+  color: var(--vg-muted);
+}
+
+/* The cell menu, and a value shown in full. */
+
+.vg-cell-menu {
+  max-width: min(480px, calc(100vw - 16px));
+}
+
+.vg-cell-menu__value {
+  max-height: min(50vh, 360px);
+  margin: 6px 0;
+  padding: 6px 8px;
+  overflow: auto;
+  font: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--vg-surface-muted);
+  border-radius: var(--vg-radius);
 }