@inflexa-ai/harness 0.19.2 → 0.21.0

package/dist/report-render/design.d.ts

@@ -17,11 +17,110 @@
  */
 /** The style rules of the page. The renderer inlines them in one `<style>` block. */
 export declare const DESIGN_CSS: string;
+/**
+ * The row height and the header height of a grid, in pixels.
+ *
+ * The theme takes both, and the page script measures the mount with the same two numbers. Thus the box of
+ * the mount and the rows inside it agree, and no row half shows at the bottom edge.
+ */
+export declare const GRID_ROW_HEIGHT_PX = 36;
+export declare const GRID_HEADER_HEIGHT_PX = 40;
+/**
+ * The bottom border of the header row, in pixels.
+ *
+ * The grid draws that border under the header, thus the box of the mount holds the header, this border, and
+ * the rows. Without it the last row sits one pixel past the box, and the grid paints a scrollbar over a
+ * table that fits.
+ */
+export declare const GRID_HEADER_BORDER_PX = 1;
+/**
+ * The count of rows that a grid shows before it scrolls, and the smallest width of a column.
+ *
+ * A card of a fixed height would leave a short table half empty. The page script takes the smaller of this
+ * count and the row count, thus a table of three rows takes the height of three rows.
+ */
+export declare const GRID_VISIBLE_ROWS = 12;
+export declare const GRID_MIN_COLUMN_WIDTH_PX = 120;
+/** The delay before a cell tooltip shows, in milliseconds. */
+export declare const GRID_TOOLTIP_DELAY_MS = 200;
+/**
+ * The count of rows that a print form holds.
+ *
+ * The print layout lays every row out at once, and a table with no row bound would take hundreds of pages.
+ * The print stops at this count, the note of the card states the truncation, and the download carries the
+ * whole table. A table under the count prints whole.
+ */
+export declare const GRID_PRINT_ROW_CAP = 1000;
+/**
+ * The theme parameters of a grid. The page script passes them to `themeQuartz.withParams`.
+ *
+ * The values read the shared tokens above. Thus the palette, the two font families, and the header
+ * treatment of the grid are the palette, the families, and the treatment of the page.
+ *
+ * `browserColorScheme` pins the light scheme. The page carries one palette, thus a browser in the dark
+ * scheme must not invert the grid under it.
+ */
+export declare const GRID_THEME_PARAMS: {
+    accentColor: "#576dea";
+    backgroundColor: "#ffffff";
+    foregroundColor: "#334155";
+    borderColor: "#e2e8f0";
+    browserColorScheme: string;
+    fontFamily: "\"Space Grotesk Variable\", system-ui, sans-serif";
+    fontSize: number;
+    headerBackgroundColor: "#f8fafc";
+    headerFontFamily: "\"IBM Plex Mono\", ui-monospace, monospace";
+    headerFontSize: number;
+    headerFontWeight: number;
+    headerTextColor: "#64748b";
+    headerHeight: number;
+    iconColor: "#94a3b8";
+    oddRowBackgroundColor: "#ffffff";
+    rowHeight: number;
+    rowHoverColor: "#f8fafc";
+    subtleTextColor: "#94a3b8";
+    wrapperBorder: boolean;
+    wrapperBorderRadius: number;
+    borderRadius: number;
+};
 /**
  * The registered name of the ECharts theme. The registration script writes this name, and the bootstrap
  * reads it. One source prevents a silent mismatch between the two sites.
  */
 export declare const ECHARTS_THEME_NAME = "inflexa";
+/**
+ * The muted chart color, beside the palette of the theme.
+ *
+ * A null category states no finding, thus it must recede behind the categories that do. The value is the
+ * `--color-ns` token of the tokens above. A chart option rides to the page as inline JSON, thus it reads no
+ * custom property and the color is written again here.
+ */
+export declare const MUTED_CHART_COLOR = "#94a3b8";
+/**
+ * The symbol ladder of a scatter, as one row count and one symbol size for each tier.
+ *
+ * A sparse scatter keeps the symbol of the chart runtime. Past the hover count the points sit close, thus
+ * the series takes a larger symbol and a point stays hoverable. Past the crowd count the plot is a cloud.
+ * A larger symbol paints one blob there, thus the series takes a small symbol at a reduced opacity. The
+ * shape of the cloud then reads. Per-point hover is lost in a crowd, and shape legibility wins.
+ */
+export declare const SCATTER_HOVER_ROWS = 2000;
+/** The symbol size of a scatter past the hover count. The ECharts default is 10, thus a point grows one step. */
+export declare const SCATTER_HOVER_SYMBOL_SIZE = 12;
+/** The row count from which a scatter recedes into a cloud. */
+export declare const SCATTER_CROWD_ROWS = 10000;
+/** The symbol size of a crowded scatter. It matches the outlier dot of a box plot. */
+export declare const SCATTER_CROWD_SYMBOL_SIZE = 4;
+/** The opacity of a crowded scatter point. An overlap then reads darker than a lone point. */
+export declare const SCATTER_CROWD_OPACITY = 0.5;
+/**
+ * The size bound of an inline chart option, in characters of serialized JSON.
+ *
+ * A small option reads well inside the page, and it costs one element. A dense scatter of many thousands of
+ * points writes each pair again inside the markup, and one such chart then holds most of the bytes of the
+ * page. Past this bound the option carries no row, and the chart reads the columnar payload of its artifact.
+ */
+export declare const CHART_INLINE_OPTION_BOUND = 100000;
 /**
  * The ECharts theme as a plain object. The renderer serializes this object and registers it, thus the theme
  * never rides a JSON file and no run-time read is necessary. The palette and the axis styles mirror the

package/dist/report-render/design.js

@@ -57,6 +57,27 @@ const FONT_FACES = `@font-face {
   font-style: normal;
   font-display: swap;
 }`;
+/**
+ * The token values that the page and the grid share.
+ *
+ * The grid takes its theme through a parameter object, and that API takes values. A CSS custom property
+ * would arrive at the grid as text that it cannot read. Thus the shared tokens are constants here, the
+ * `:root` block below interpolates them, and `GRID_THEME_PARAMS` reads the same names. One source then
+ * styles the page and the grid.
+ */
+const TOKEN = {
+    primary500: "#576dea",
+    heading: "#0f172a",
+    textStrong: "#334155",
+    textSecondary: "#64748b",
+    textMuted: "#94a3b8",
+    card: "#ffffff",
+    bgAlt: "#f8fafc",
+    borderSubtle: "#f1f5f9",
+    border: "#e2e8f0",
+    fontSans: `"Space Grotesk Variable", system-ui, sans-serif`,
+    fontMono: `"IBM Plex Mono", ui-monospace, monospace`,
+};
 /** The style rules of the page. The renderer inlines them in one `<style>` block. */
 export const DESIGN_CSS = `${FONT_FACES}
 
@@ -68,23 +89,23 @@ export const DESIGN_CSS = `${FONT_FACES}
   --color-primary-200: #bcc2f9;
   --color-primary-300: #9ba5f5;
   --color-primary-400: #7987f0;
-  --color-primary-500: #576dea;
+  --color-primary-500: ${TOKEN.primary500};
   --color-primary-600: #4458d4;
   --color-primary-700: #3545b0;
 
   /* Text */
-  --color-heading:        #0f172a;
-  --color-text-strong:    #334155;
+  --color-heading:        ${TOKEN.heading};
+  --color-text-strong:    ${TOKEN.textStrong};
   --color-text:           #475569;
-  --color-text-secondary: #64748b;
-  --color-text-muted:     #94a3b8;
+  --color-text-secondary: ${TOKEN.textSecondary};
+  --color-text-muted:     ${TOKEN.textMuted};
 
   /* Surface */
   --color-bg:             #ffffff;
-  --color-bg-alt:         #f8fafc;
-  --color-card:           #ffffff;
-  --color-border-subtle:  #f1f5f9;
-  --color-border:         #e2e8f0;
+  --color-bg-alt:         ${TOKEN.bgAlt};
+  --color-card:           ${TOKEN.card};
+  --color-border-subtle:  ${TOKEN.borderSubtle};
+  --color-border:         ${TOKEN.border};
   --color-border-hover:   #cbd5e1;
   --color-surface-dark:   #0f172a;
 
@@ -109,9 +130,10 @@ export const DESIGN_CSS = `${FONT_FACES}
   --color-stat-amber:   #f59e0b;
 
   /* Typography and layout */
-  --font-sans: "Space Grotesk Variable", system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --font-sans: ${TOKEN.fontSans};
+  --font-mono: ${TOKEN.fontMono};
   --layout-max: 1600px;
+  --content-max: 1100px;
   --nav-width: 15rem;
 }
 
@@ -175,6 +197,13 @@ img {
   padding-left: 24px;
   padding-right: 24px;
 }
+/* The one content column of the page. The container gives the full-bleed gutter, and this column carries
+   every block kind. Thus the prose, the metric grid, the tables, and the charts read at one measure. */
+.report-content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--content-max);
+}
 
 .report-hero {
   position: relative;
@@ -261,11 +290,13 @@ img {
   padding: 20px;
   border-bottom: 1px solid var(--color-border);
 }
+/* The brand is the one link of the page that leaves it. It reads as the brand, not as a link. */
 .report-nav-brand-name {
   font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.08em;
+  text-decoration: none;
   color: var(--color-primary-500);
 }
 .report-nav-list {
@@ -290,6 +321,13 @@ img {
   background-color: var(--color-bg-alt);
   border-left-color: var(--color-primary-500);
 }
+/* The page script adds this class to the link of the section in view. One link carries it at a time. */
+.report-nav-link-active {
+  font-weight: 600;
+  color: var(--color-heading);
+  background-color: var(--color-bg-alt);
+  border-left-color: var(--color-primary-500);
+}
 .report-nav-index {
   flex-shrink: 0;
   width: 16px;
@@ -307,15 +345,29 @@ img {
 }
 
 /* ── Prose and evidence markers ───────────────────────── */
+/* The prose fills the content column. No inner measure caps it, thus a band carries no half-empty side. */
 .report-prose {
-  max-width: 72ch;
   margin-bottom: 16px;
   line-height: 1.7;
   color: var(--color-text);
 }
+/* A list reads as prose that carries markers, thus it takes the type scale of the paragraph. The margin
+   is explicit on each side, because the base rule zeroes an ordered list and a browser still spaces an
+   unordered one. The left padding holds the markers, thus each item aligns inside the content column. */
+.report-list {
+  margin: 0 0 16px;
+  padding-left: 24px;
+  line-height: 1.7;
+  color: var(--color-text);
+}
+.report-list-item {
+  margin-bottom: 6px;
+}
+/* The bracket marker of the one reference ladder. It sits inline beside 16px prose, thus it reads at the
+   size of a small inline word and never at the size of a superscript. */
 .report-marker {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 12px;
 }
 .report-marker a {
   color: var(--color-primary-500);
@@ -389,6 +441,9 @@ img {
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-stat-primary);
+  /* A value that the number format cannot shorten, for example a long identifier, breaks inside the card
+     instead of past its edge. */
+  overflow-wrap: anywhere;
 }
 .stat-card-label {
   margin-top: 8px;
@@ -404,7 +459,9 @@ img {
 .report-table {
   margin-bottom: 32px;
 }
-.report-table-title {
+/* The title line of a data card. A table and a chart carry the same line, thus one rule serves both. */
+.report-table-title,
+.report-chart-title {
   margin-bottom: 12px;
   font-family: var(--font-mono);
   font-size: 12px;
@@ -413,39 +470,71 @@ img {
   text-transform: uppercase;
   color: var(--color-primary-500);
 }
-.data-table-scroll {
-  overflow-x: auto;
-}
-.data-table {
+/* The mount of one grid. The page script sizes it from the row count, thus the box fits a short table and
+   a long table scrolls inside its own viewport. A mount whose payload the page does not hold takes no size,
+   thus the card shows its title and its download alone. */
+.report-grid {
   width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
 }
-.data-table th {
-  padding: 12px 16px;
-  text-align: left;
+/* The footer of a table card: the status of the table on the left, the download button on the right, and
+   the print note under both. The three read as one surface under the grid. */
+.report-table-footer {
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
+}
+.report-table-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+/* The status of the table: the row count, and the row bound of the binding beside it. */
+.report-table-status {
   font-family: var(--font-mono);
   font-size: 11px;
-  font-weight: 600;
   letter-spacing: 0.06em;
-  text-transform: uppercase;
   color: var(--color-text-secondary);
-  background-color: var(--color-bg-alt);
-  border-bottom: 1px solid var(--color-border);
 }
-.data-table td {
-  padding: 10px 16px;
-  color: var(--color-text-strong);
-  border-bottom: 1px solid var(--color-border-subtle);
+.report-table-bound {
+  color: var(--color-text-muted);
 }
-.report-row {
-  transition: background-color 0.15s ease;
+/* The bound reads as a second clause of the status line, thus a separator divides the two. The dot is a
+   literal character, because a hex escape eats the space that follows it and the two clauses would touch. */
+.report-table-bound::before {
+  content: " · ";
 }
-.report-row:hover {
-  background-color: var(--color-bg-alt);
+/* The download of the raw bytes. It reads as a button, because it is the one action of a table card. */
+.report-table-download {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: 6px 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primary-500);
+  text-decoration: none;
+  background: var(--color-card);
+  border: 1px solid var(--color-primary-200);
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+}
+.report-table-download:hover {
+  color: var(--color-primary-700);
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-500);
 }
-.report-row:last-child td {
-  border-bottom: 0;
+/* The print note of a table card. The page script writes the bound of a truncated print form into it at
+   print time, and it clears the text after. An empty note takes no space, thus the screen shows none. */
+.report-grid-note {
+  margin-top: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+.report-grid-note:empty {
+  display: none;
 }
 
 /* ── Figure and citation cards ────────────────────────── */
@@ -463,79 +552,37 @@ img {
   font-size: 14px;
   color: var(--color-text-secondary);
 }
+/* The short citation is the name of the paper, thus it carries the weight of the card. */
+.report-citation-source {
+  font-weight: 600;
+  color: var(--color-text);
+}
+a.report-citation-source {
+  text-decoration: none;
+}
+a.report-citation-source:hover {
+  text-decoration: underline;
+}
 .report-citation-note {
   color: var(--color-text);
 }
+.report-citation-key {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
 .report-caption {
   margin-top: 8px;
   font-size: 13px;
   color: var(--color-text-muted);
 }
 
-/* ── Window-chrome chart panel ────────────────────────── */
-/* The chart panel is the one component with rounded corners. */
+/* ── Chart card ───────────────────────────────────────── */
+/* The chart is a data card, thus it takes the square corner-accent form of the table and the figure. */
 .report-chart {
   margin-bottom: 32px;
 }
-.window-chrome {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  background: var(--color-card);
-  box-shadow: 0 8px 30px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.04);
-  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
-}
-.window-chrome:hover {
-  transform: translateY(-4px);
-  border-color: var(--color-border-hover);
-  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 12px 24px -8px rgba(15, 23, 42, 0.1);
-}
-.window-chrome-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
-  background-color: var(--color-bg-alt);
-  border-bottom: 1px solid var(--color-border-subtle);
-}
-.chrome-dots {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.chrome-dot {
-  display: block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: var(--color-border-hover);
-  transition: background-color 0.3s ease;
-}
-.window-chrome:hover .dot-1 {
-  background-color: #fb7185;
-}
-.window-chrome:hover .dot-2 {
-  background-color: #fbbf24;
-}
-.window-chrome:hover .dot-3 {
-  background-color: #4ade80;
-}
-.window-chrome-title {
-  flex: 1 1 auto;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-heading);
-}
-.window-chrome-badge {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  color: var(--color-primary-500);
-}
-.window-chrome-body {
+.report-chart-card {
   padding: 16px;
 }
 /* The chart runtime measures the container. A container with no height shows no chart. */
@@ -544,31 +591,68 @@ img {
   height: 400px;
 }
 
-/* ── Reference list ───────────────────────────────────── */
+/* ── References appendix ──────────────────────────────── */
+/* The appendix is a record of where each value came from. A reader consults it, and a reader does not read
+   it through. Thus it stays smaller and quieter than the body of the report. One list holds both reference
+   kinds, thus one set of rules styles an artifact entry and a paper entry alike. */
+.report-ref-title {
+  color: var(--color-text-secondary);
+}
 .report-references {
   padding-left: 24px;
   list-style: decimal;
+  color: var(--color-text-muted);
 }
 .report-ref-item {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--color-text);
+  margin-bottom: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
 }
 .report-ref-kind {
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--color-text-muted);
 }
 .report-ref-path {
   font-family: var(--font-mono);
-  font-size: 13px;
+  font-size: 12px;
   color: var(--color-primary-700);
 }
 .report-ref-detail {
+  color: var(--color-text-muted);
+}
+/* The chain of a derived path reads under its entry, thus the entry line keeps the form of a pinned
+   artifact and the sources sit on a line of their own. */
+.report-ref-chain {
+  margin-top: 2px;
+  color: var(--color-text-muted);
+}
+/* A link of the chain: the staged script, and the derived file. The link carries the code span of its
+   subject, thus the underline arrives on hover alone and the line stays quiet. */
+.report-ref-link {
+  text-decoration: none;
+}
+.report-ref-link:hover {
+  text-decoration: underline;
+}
+/* The head of a content hash. It reads smaller than a path, because it identifies bytes and a reader
+   compares it against a staged file name instead of reading it. */
+.report-ref-hash {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-muted);
+}
+.report-cite-source {
   color: var(--color-text-secondary);
 }
+/* The description of the paper reads under its citation, thus it takes a line of its own. */
+.report-cite-description {
+  margin-top: 2px;
+  color: var(--color-text-muted);
+}
 
 /* ── Section textures ─────────────────────────────────── */
 /* A texture is felt, not seen: a low opacity and a faded edge. */
@@ -740,15 +824,113 @@ img {
   .report-footer-note {
     color: var(--color-text-strong);
   }
-  .window-chrome {
-    box-shadow: none;
-  }
 }`;
+/**
+ * The row height and the header height of a grid, in pixels.
+ *
+ * The theme takes both, and the page script measures the mount with the same two numbers. Thus the box of
+ * the mount and the rows inside it agree, and no row half shows at the bottom edge.
+ */
+export const GRID_ROW_HEIGHT_PX = 36;
+export const GRID_HEADER_HEIGHT_PX = 40;
+/**
+ * The bottom border of the header row, in pixels.
+ *
+ * The grid draws that border under the header, thus the box of the mount holds the header, this border, and
+ * the rows. Without it the last row sits one pixel past the box, and the grid paints a scrollbar over a
+ * table that fits.
+ */
+export const GRID_HEADER_BORDER_PX = 1;
+/**
+ * The count of rows that a grid shows before it scrolls, and the smallest width of a column.
+ *
+ * A card of a fixed height would leave a short table half empty. The page script takes the smaller of this
+ * count and the row count, thus a table of three rows takes the height of three rows.
+ */
+export const GRID_VISIBLE_ROWS = 12;
+export const GRID_MIN_COLUMN_WIDTH_PX = 120;
+/** The delay before a cell tooltip shows, in milliseconds. */
+export const GRID_TOOLTIP_DELAY_MS = 200;
+/**
+ * The count of rows that a print form holds.
+ *
+ * The print layout lays every row out at once, and a table with no row bound would take hundreds of pages.
+ * The print stops at this count, the note of the card states the truncation, and the download carries the
+ * whole table. A table under the count prints whole.
+ */
+export const GRID_PRINT_ROW_CAP = 1000;
+/**
+ * The theme parameters of a grid. The page script passes them to `themeQuartz.withParams`.
+ *
+ * The values read the shared tokens above. Thus the palette, the two font families, and the header
+ * treatment of the grid are the palette, the families, and the treatment of the page.
+ *
+ * `browserColorScheme` pins the light scheme. The page carries one palette, thus a browser in the dark
+ * scheme must not invert the grid under it.
+ */
+export const GRID_THEME_PARAMS = {
+    accentColor: TOKEN.primary500,
+    backgroundColor: TOKEN.card,
+    foregroundColor: TOKEN.textStrong,
+    borderColor: TOKEN.border,
+    browserColorScheme: "light",
+    fontFamily: TOKEN.fontSans,
+    fontSize: 14,
+    headerBackgroundColor: TOKEN.bgAlt,
+    headerFontFamily: TOKEN.fontMono,
+    headerFontSize: 11,
+    headerFontWeight: 600,
+    headerTextColor: TOKEN.textSecondary,
+    headerHeight: GRID_HEADER_HEIGHT_PX,
+    iconColor: TOKEN.textMuted,
+    oddRowBackgroundColor: TOKEN.card,
+    rowHeight: GRID_ROW_HEIGHT_PX,
+    rowHoverColor: TOKEN.bgAlt,
+    subtleTextColor: TOKEN.textMuted,
+    // The corner-accent card around the mount carries the border and the square corners of the identity.
+    // A second border on the wrapper would double the rule at each edge of the card.
+    wrapperBorder: false,
+    wrapperBorderRadius: 0,
+    borderRadius: 0,
+};
 /**
  * The registered name of the ECharts theme. The registration script writes this name, and the bootstrap
  * reads it. One source prevents a silent mismatch between the two sites.
  */
 export const ECHARTS_THEME_NAME = "inflexa";
+/**
+ * The muted chart color, beside the palette of the theme.
+ *
+ * A null category states no finding, thus it must recede behind the categories that do. The value is the
+ * `--color-ns` token of the tokens above. A chart option rides to the page as inline JSON, thus it reads no
+ * custom property and the color is written again here.
+ */
+export const MUTED_CHART_COLOR = "#94a3b8";
+/**
+ * The symbol ladder of a scatter, as one row count and one symbol size for each tier.
+ *
+ * A sparse scatter keeps the symbol of the chart runtime. Past the hover count the points sit close, thus
+ * the series takes a larger symbol and a point stays hoverable. Past the crowd count the plot is a cloud.
+ * A larger symbol paints one blob there, thus the series takes a small symbol at a reduced opacity. The
+ * shape of the cloud then reads. Per-point hover is lost in a crowd, and shape legibility wins.
+ */
+export const SCATTER_HOVER_ROWS = 2000;
+/** The symbol size of a scatter past the hover count. The ECharts default is 10, thus a point grows one step. */
+export const SCATTER_HOVER_SYMBOL_SIZE = 12;
+/** The row count from which a scatter recedes into a cloud. */
+export const SCATTER_CROWD_ROWS = 10000;
+/** The symbol size of a crowded scatter. It matches the outlier dot of a box plot. */
+export const SCATTER_CROWD_SYMBOL_SIZE = 4;
+/** The opacity of a crowded scatter point. An overlap then reads darker than a lone point. */
+export const SCATTER_CROWD_OPACITY = 0.5;
+/**
+ * The size bound of an inline chart option, in characters of serialized JSON.
+ *
+ * A small option reads well inside the page, and it costs one element. A dense scatter of many thousands of
+ * points writes each pair again inside the markup, and one such chart then holds most of the bytes of the
+ * page. Past this bound the option carries no row, and the chart reads the columnar payload of its artifact.
+ */
+export const CHART_INLINE_OPTION_BOUND = 100_000;
 /**
  * The ECharts theme as a plain object. The renderer serializes this object and registers it, thus the theme
  * never rides a JSON file and no run-time read is necessary. The palette and the axis styles mirror the