@voila.dev/chart 4.0.0

package/dist/core/define-chart.d.ts

@@ -0,0 +1,96 @@
+import type { ChartFocusOrder, ChartMargin, ChartMark, ChartPositionScaleKind, ChartProjection, ChartScene, ChartTextMeasurer, ChartTheme, ChartValue } from "./types.js";
+export interface ChartAxisOptions {
+    /** Axis title, data-table column heading and tooltip heading. */
+    readonly label?: string;
+    /** `false` hides the axis; the scale still places the marks. */
+    readonly axis?: boolean;
+    readonly grid?: boolean;
+    /** A tick count to aim for, or the exact values to tick. */
+    readonly ticks?: number | ReadonlyArray<ChartValue>;
+    readonly tickFormat?: (value: ChartValue) => string;
+    /** How the tooltip, live region and data table write a value of this channel. */
+    readonly format?: (value: ChartValue) => string;
+}
+export interface ChartPositionScaleOptions extends ChartAxisOptions {
+    readonly type?: ChartPositionScaleKind;
+    readonly domain?: ReadonlyArray<ChartValue>;
+    /** Widen a continuous domain to round ticks. On by default for y. */
+    readonly nice?: boolean;
+    /** Keep zero on a continuous domain even when no mark asks for it. */
+    readonly zero?: boolean;
+    readonly reverse?: boolean;
+    readonly paddingInner?: number;
+    readonly paddingOuter?: number;
+}
+export interface ChartColorOptions {
+    readonly type?: "ordinal" | "sequential";
+    readonly domain?: ReadonlyArray<ChartValue>;
+    /** Palette for an ordinal scale, `[from, to]` for a sequential one. */
+    readonly range?: ReadonlyArray<string>;
+    readonly legend?: boolean;
+    /** Display names of the series, by value. */
+    readonly labels?: Readonly<Record<string, string>>;
+}
+/**
+ * Small multiples: the same chart once per value, on a grid, every cell on
+ * the same scales so the cells compare at a glance.
+ */
+export interface ChartFacetOptions {
+    readonly values: ReadonlyArray<ChartValue>;
+    /** The marks of one cell. */
+    readonly marks: (value: ChartValue, index: number) => ReadonlyArray<ChartMark | false | null | undefined>;
+    readonly label?: (value: ChartValue) => string;
+    /** Cells per row. Defaults to three, or fewer when there are fewer values. */
+    readonly columns?: number;
+    /** Pixels between two cells. */
+    readonly gap?: number;
+}
+/**
+ * What `facet(…)` returns: the options, and the compiler that lays the cells
+ * out. Carried by the spec rather than imported by the core, so a chart
+ * without facets never ships the facet code.
+ */
+export interface ChartFacet {
+    readonly options: ChartFacetOptions;
+    readonly compile: (spec: ChartSpec, options: ChartFacetCompileOptions) => ChartScene;
+}
+/** The compile options a facet compiler is handed, plus the per-cell compiler. */
+export interface ChartFacetCompileOptions {
+    readonly width: number;
+    readonly height: number;
+    readonly measureText?: ChartTextMeasurer;
+    readonly hiddenSeries?: ReadonlySet<string>;
+    readonly xDomain?: readonly [number, number];
+    readonly compileCell: (spec: ChartSpec, options: Omit<ChartFacetCompileOptions, "compileCell">) => ChartScene;
+}
+export interface ChartSpec {
+    /** Falsy entries are skipped, so a mark can be switched on with `&&`. Unused with `facet`. */
+    readonly marks?: ReadonlyArray<ChartMark | false | null | undefined>;
+    readonly x?: ChartPositionScaleOptions;
+    readonly y?: ChartPositionScaleOptions;
+    readonly color?: ChartColorOptions;
+    /** Overrides the margins the axes would reserve, side by side. */
+    readonly margin?: Partial<ChartMargin>;
+    readonly focus?: ChartFocusOrder;
+    /** Small multiples, from `facet(…)`. With it, `marks` is ignored: each cell takes its own. */
+    readonly facet?: ChartFacet;
+    /** For maps: how longitude and latitude become pixels. */
+    readonly projection?: ChartProjection;
+    readonly locale?: string;
+    readonly theme?: Partial<ChartTheme>;
+}
+export interface ChartBuildContext {
+    readonly width: number;
+    readonly height: number;
+}
+export interface ChartDefinition {
+    readonly build: (context: ChartBuildContext) => ChartSpec;
+}
+/**
+ * A chart as data. Pass the spec when it does not depend on the size, or a
+ * builder when it does (fewer ticks on a phone, a different layout below some
+ * width). Build it in `useMemo`: the definition's identity is what tells the
+ * renderer the data changed.
+ */
+export declare function defineChart(spec: ChartSpec | ((context: ChartBuildContext) => ChartSpec)): ChartDefinition;
+//# sourceMappingURL=define-chart.d.ts.map

package/dist/core/define-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-chart.d.ts","sourceRoot":"","sources":["../../src/core/define-chart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACT,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAChC,iEAAiE;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IACpD,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IAClE,QAAQ,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5C,qEAAqE;IACrE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACzC,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5C,uEAAuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACnD;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,EAAE,CACf,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,MAAM,KACT,aAAa,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;IAC/C,8EAA8E;IAC9E,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;IACpC,QAAQ,CAAC,OAAO,EAAE,CACjB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,wBAAwB,KAC7B,UAAU,CAAC;CAChB;AAED,kFAAkF;AAClF,MAAM,WAAW,wBAAwB;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,WAAW,EAAE,CACrB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAAa,CAAC,KAClD,UAAU,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACzB,8FAA8F;IAC9F,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACrE,QAAQ,CAAC,CAAC,CAAC,EAAE,yBAAyB,CAAC;IACvC,QAAQ,CAAC,CAAC,CAAC,EAAE,yBAAyB,CAAC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IACnC,kEAAkE;IAClE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;IACjC,8FAA8F;IAC9F,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC1D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAC1B,IAAI,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAC3D,eAAe,CAEjB"}

package/dist/core/define-chart.js

@@ -0,0 +1,7 @@
+function defineChart(spec) {
+  return { build: typeof spec === "function" ? spec : () => spec };
+}
+export {
+  defineChart
+};
+//# sourceMappingURL=define-chart.js.map

package/dist/core/define-chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/core/define-chart.ts"],
+  "sourcesContent": ["import type {\n\tChartFocusOrder,\n\tChartMargin,\n\tChartMark,\n\tChartPositionScaleKind,\n\tChartProjection,\n\tChartScene,\n\tChartTextMeasurer,\n\tChartTheme,\n\tChartValue,\n} from \"#/core/types.ts\";\n\nexport interface ChartAxisOptions {\n\t/** Axis title, data-table column heading and tooltip heading. */\n\treadonly label?: string;\n\t/** `false` hides the axis; the scale still places the marks. */\n\treadonly axis?: boolean;\n\treadonly grid?: boolean;\n\t/** A tick count to aim for, or the exact values to tick. */\n\treadonly ticks?: number | ReadonlyArray<ChartValue>;\n\treadonly tickFormat?: (value: ChartValue) => string;\n\t/** How the tooltip, live region and data table write a value of this channel. */\n\treadonly format?: (value: ChartValue) => string;\n}\n\nexport interface ChartPositionScaleOptions extends ChartAxisOptions {\n\treadonly type?: ChartPositionScaleKind;\n\treadonly domain?: ReadonlyArray<ChartValue>;\n\t/** Widen a continuous domain to round ticks. On by default for y. */\n\treadonly nice?: boolean;\n\t/** Keep zero on a continuous domain even when no mark asks for it. */\n\treadonly zero?: boolean;\n\treadonly reverse?: boolean;\n\treadonly paddingInner?: number;\n\treadonly paddingOuter?: number;\n}\n\nexport interface ChartColorOptions {\n\treadonly type?: \"ordinal\" | \"sequential\";\n\treadonly domain?: ReadonlyArray<ChartValue>;\n\t/** Palette for an ordinal scale, `[from, to]` for a sequential one. */\n\treadonly range?: ReadonlyArray<string>;\n\treadonly legend?: boolean;\n\t/** Display names of the series, by value. */\n\treadonly labels?: Readonly<Record<string, string>>;\n}\n\n/**\n * Small multiples: the same chart once per value, on a grid, every cell on\n * the same scales so the cells compare at a glance.\n */\nexport interface ChartFacetOptions {\n\treadonly values: ReadonlyArray<ChartValue>;\n\t/** The marks of one cell. */\n\treadonly marks: (\n\t\tvalue: ChartValue,\n\t\tindex: number,\n\t) => ReadonlyArray<ChartMark | false | null | undefined>;\n\treadonly label?: (value: ChartValue) => string;\n\t/** Cells per row. Defaults to three, or fewer when there are fewer values. */\n\treadonly columns?: number;\n\t/** Pixels between two cells. */\n\treadonly gap?: number;\n}\n\n/**\n * What `facet(\u2026)` returns: the options, and the compiler that lays the cells\n * out. Carried by the spec rather than imported by the core, so a chart\n * without facets never ships the facet code.\n */\nexport interface ChartFacet {\n\treadonly options: ChartFacetOptions;\n\treadonly compile: (\n\t\tspec: ChartSpec,\n\t\toptions: ChartFacetCompileOptions,\n\t) => ChartScene;\n}\n\n/** The compile options a facet compiler is handed, plus the per-cell compiler. */\nexport interface ChartFacetCompileOptions {\n\treadonly width: number;\n\treadonly height: number;\n\treadonly measureText?: ChartTextMeasurer;\n\treadonly hiddenSeries?: ReadonlySet<string>;\n\treadonly xDomain?: readonly [number, number];\n\treadonly compileCell: (\n\t\tspec: ChartSpec,\n\t\toptions: Omit<ChartFacetCompileOptions, \"compileCell\">,\n\t) => ChartScene;\n}\n\nexport interface ChartSpec {\n\t/** Falsy entries are skipped, so a mark can be switched on with `&&`. Unused with `facet`. */\n\treadonly marks?: ReadonlyArray<ChartMark | false | null | undefined>;\n\treadonly x?: ChartPositionScaleOptions;\n\treadonly y?: ChartPositionScaleOptions;\n\treadonly color?: ChartColorOptions;\n\t/** Overrides the margins the axes would reserve, side by side. */\n\treadonly margin?: Partial<ChartMargin>;\n\treadonly focus?: ChartFocusOrder;\n\t/** Small multiples, from `facet(\u2026)`. With it, `marks` is ignored: each cell takes its own. */\n\treadonly facet?: ChartFacet;\n\t/** For maps: how longitude and latitude become pixels. */\n\treadonly projection?: ChartProjection;\n\treadonly locale?: string;\n\treadonly theme?: Partial<ChartTheme>;\n}\n\nexport interface ChartBuildContext {\n\treadonly width: number;\n\treadonly height: number;\n}\n\nexport interface ChartDefinition {\n\treadonly build: (context: ChartBuildContext) => ChartSpec;\n}\n\n/**\n * A chart as data. Pass the spec when it does not depend on the size, or a\n * builder when it does (fewer ticks on a phone, a different layout below some\n * width). Build it in `useMemo`: the definition's identity is what tells the\n * renderer the data changed.\n */\nexport function defineChart(\n\tspec: ChartSpec | ((context: ChartBuildContext) => ChartSpec),\n): ChartDefinition {\n\treturn { build: typeof spec === \"function\" ? spec : () => spec };\n}\n"],
+  "mappings": "AA2HO,SAAS,YACf,MACkB;AAClB,SAAO,EAAE,OAAO,OAAO,SAAS,aAAa,OAAO,MAAM,KAAK;AAChE;",
+  "names": []
+}

package/dist/core/facet.d.ts

@@ -0,0 +1,7 @@
+import type { ChartFacet, ChartFacetOptions } from "./define-chart.js";
+/**
+ * Small multiples: the same chart once per value, on a grid, every cell on
+ * the same scales. Pass the result as the definition's `facet`.
+ */
+export declare function facet(options: ChartFacetOptions): ChartFacet;
+//# sourceMappingURL=facet.d.ts.map

package/dist/core/facet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../src/core/facet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,UAAU,EAEV,iBAAiB,EAEjB,MAAM,wBAAwB,CAAC;AA4KhC;;;GAGG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CAM5D"}

package/dist/core/facet.js

@@ -0,0 +1,134 @@
+import { channelsOf, isMark } from "./compile.js";
+import { formatValue } from "./format.js";
+import { categoryKey } from "./scales/discrete.js";
+import { planScale } from "./scales/resolve.js";
+import { DEFAULT_THEME } from "./theme.js";
+const DEFAULT_COLUMNS = 3;
+const DEFAULT_GAP = 16;
+const TITLE_GAP = 6;
+function shifted(hit, dx, dy) {
+  if (hit === void 0) {
+    return void 0;
+  }
+  return hit.kind === "rect" ? {
+    kind: "rect",
+    rect: { ...hit.rect, x: hit.rect.x + dx, y: hit.rect.y + dy }
+  } : { ...hit, cx: hit.cx + dx, cy: hit.cy + dy };
+}
+function compileFacets(spec, facet2, options) {
+  const { compileCell, ...cellOptions } = options;
+  const { width, height } = options;
+  const theme = { ...DEFAULT_THEME, ...spec.theme };
+  const values = facet2.values;
+  const columns = Math.max(
+    1,
+    Math.min(facet2.columns ?? DEFAULT_COLUMNS, values.length)
+  );
+  const rows = Math.max(1, Math.ceil(values.length / columns));
+  const gap = facet2.gap ?? DEFAULT_GAP;
+  const title = theme.fontSize + TITLE_GAP;
+  const cellWidth = (width - gap * (columns - 1)) / columns;
+  const cellHeight = (height - gap * (rows - 1)) / rows;
+  const label = (value) => facet2.label?.(value) ?? formatValue(value, spec.locale);
+  const cellMarks = values.map(
+    (value, index) => facet2.marks(value, index).filter(isMark)
+  );
+  const everyMark = cellMarks.flat();
+  const cartesian = everyMark.filter((mark) => mark.coordinate === "cartesian");
+  const sharedX = planScale(channelsOf(cartesian, "x"), spec.x, "x");
+  const sharedY = planScale(channelsOf(cartesian, "y"), spec.y, "y");
+  const colors = channelsOf(everyMark, "color").flatMap(
+    (channel) => channel.values
+  );
+  const numericColors = colors.length > 0 && colors.every((value) => typeof value === "number");
+  const colorDomain = spec.color?.domain ?? (colors.length === 0 ? void 0 : numericColors ? [Math.min(...colors), Math.max(...colors)] : [
+    ...new Map(
+      colors.map((value) => [categoryKey(value), value])
+    ).values()
+  ]);
+  const nodes = [];
+  const points = [];
+  const legend = [];
+  const cells = [];
+  let first;
+  for (const [index, value] of values.entries()) {
+    const key = categoryKey(value);
+    const x = index % columns * (cellWidth + gap);
+    const y = Math.floor(index / columns) * (cellHeight + gap);
+    const cell = compileCell(
+      {
+        ...spec,
+        facet: void 0,
+        marks: cellMarks[index],
+        x: sharedX ? { ...spec.x, domain: sharedX.domain, nice: false } : spec.x,
+        y: sharedY ? { ...spec.y, domain: sharedY.domain, nice: false } : spec.y,
+        color: colorDomain ? { ...spec.color, domain: colorDomain } : spec.color
+      },
+      { ...cellOptions, width: cellWidth, height: cellHeight - title }
+    );
+    first ??= cell;
+    const dy = y + title;
+    nodes.push(
+      {
+        kind: "text",
+        key: `facet-title:${key}`,
+        role: "facet-title",
+        x: x + cell.plot.x,
+        y,
+        text: label(value),
+        paint: {
+          fill: theme.foreground,
+          fontSize: theme.fontSize,
+          fontWeight: 600,
+          baseline: "top"
+        }
+      },
+      {
+        kind: "group",
+        key: `facet:${key}`,
+        translate: { x, y: dy },
+        children: cell.nodes
+      }
+    );
+    for (const point of cell.points) {
+      points.push({
+        ...point,
+        key: `${key}|${point.key}`,
+        x: point.x + x,
+        y: point.y + dy,
+        hit: shifted(point.hit, x, dy),
+        facet: key,
+        title: `${label(value)} \xB7 ${point.title}`
+      });
+    }
+    legend.push(...cell.legend);
+    cells.push({
+      key,
+      label: label(value),
+      plot: { ...cell.plot, x: cell.plot.x + x, y: cell.plot.y + dy }
+    });
+  }
+  const distinctLegend = [
+    ...new Map(legend.map((item) => [item.key, item])).values()
+  ];
+  return {
+    ...first ?? compileCell({ ...spec, facet: void 0, marks: [] }, cellOptions),
+    width,
+    height,
+    plot: { x: 0, y: 0, width, height },
+    nodes,
+    points,
+    legend: distinctLegend,
+    cells
+  };
+}
+function facet(options) {
+  return {
+    options,
+    compile: (spec, compileOptions) => compileFacets(spec, options, compileOptions)
+  };
+}
+export {
+  facet
+};
+//# sourceMappingURL=facet.js.map

package/dist/core/facet.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/core/facet.ts"],
+  "sourcesContent": ["import { channelsOf, isMark } from \"#/core/compile.ts\";\nimport type {\n\tChartFacet,\n\tChartFacetCompileOptions,\n\tChartFacetOptions,\n\tChartSpec,\n} from \"#/core/define-chart.ts\";\nimport { formatValue } from \"#/core/format.ts\";\nimport { categoryKey } from \"#/core/scales/discrete.ts\";\nimport { planScale } from \"#/core/scales/resolve.ts\";\nimport { DEFAULT_THEME } from \"#/core/theme.ts\";\nimport type {\n\tChartHitShape,\n\tChartLegendItem,\n\tChartMark,\n\tChartPoint,\n\tChartScene,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nconst DEFAULT_COLUMNS = 3;\nconst DEFAULT_GAP = 16;\nconst TITLE_GAP = 6;\n\nfunction shifted(\n\thit: ChartHitShape | undefined,\n\tdx: number,\n\tdy: number,\n): ChartHitShape | undefined {\n\tif (hit === undefined) {\n\t\treturn undefined;\n\t}\n\treturn hit.kind === \"rect\"\n\t\t? {\n\t\t\t\tkind: \"rect\",\n\t\t\t\trect: { ...hit.rect, x: hit.rect.x + dx, y: hit.rect.y + dy },\n\t\t\t}\n\t\t: { ...hit, cx: hit.cx + dx, cy: hit.cy + dy };\n}\n\n/**\n * Small multiples. Every cell is compiled as a chart of its own, on x, y and\n * colour domains planned over all the cells together, then moved to its\n * place in the grid under a title. Points carry their cell, so the keyboard\n * walks one cell's values and the tooltip names the cell.\n */\nfunction compileFacets(\n\tspec: ChartSpec,\n\tfacet: ChartFacetOptions,\n\toptions: ChartFacetCompileOptions,\n): ChartScene {\n\tconst { compileCell, ...cellOptions } = options;\n\tconst { width, height } = options;\n\tconst theme = { ...DEFAULT_THEME, ...spec.theme };\n\tconst values = facet.values;\n\tconst columns = Math.max(\n\t\t1,\n\t\tMath.min(facet.columns ?? DEFAULT_COLUMNS, values.length),\n\t);\n\tconst rows = Math.max(1, Math.ceil(values.length / columns));\n\tconst gap = facet.gap ?? DEFAULT_GAP;\n\tconst title = theme.fontSize + TITLE_GAP;\n\tconst cellWidth = (width - gap * (columns - 1)) / columns;\n\tconst cellHeight = (height - gap * (rows - 1)) / rows;\n\tconst label = (value: (typeof values)[number]) =>\n\t\tfacet.label?.(value) ?? formatValue(value, spec.locale);\n\n\tconst cellMarks: ChartMark[][] = values.map((value, index) =>\n\t\tfacet.marks(value, index).filter(isMark),\n\t);\n\tconst everyMark = cellMarks.flat();\n\tconst cartesian = everyMark.filter((mark) => mark.coordinate === \"cartesian\");\n\tconst sharedX = planScale(channelsOf(cartesian, \"x\"), spec.x, \"x\");\n\tconst sharedY = planScale(channelsOf(cartesian, \"y\"), spec.y, \"y\");\n\tconst colors = channelsOf(everyMark, \"color\").flatMap(\n\t\t(channel) => channel.values,\n\t);\n\tconst numericColors =\n\t\tcolors.length > 0 && colors.every((value) => typeof value === \"number\");\n\tconst colorDomain =\n\t\tspec.color?.domain ??\n\t\t(colors.length === 0\n\t\t\t? undefined\n\t\t\t: numericColors\n\t\t\t\t? [Math.min(...(colors as number[])), Math.max(...(colors as number[]))]\n\t\t\t\t: [\n\t\t\t\t\t\t...new Map(\n\t\t\t\t\t\t\tcolors.map((value) => [categoryKey(value), value]),\n\t\t\t\t\t\t).values(),\n\t\t\t\t\t]);\n\n\tconst nodes: SceneNode[] = [];\n\tconst points: ChartPoint[] = [];\n\tconst legend: ChartLegendItem[] = [];\n\tconst cells: Array<{ key: string; label: string; plot: ChartScene[\"plot\"] }> =\n\t\t[];\n\tlet first: ChartScene | undefined;\n\n\tfor (const [index, value] of values.entries()) {\n\t\tconst key = categoryKey(value);\n\t\tconst x = (index % columns) * (cellWidth + gap);\n\t\tconst y = Math.floor(index / columns) * (cellHeight + gap);\n\t\tconst cell = compileCell(\n\t\t\t{\n\t\t\t\t...spec,\n\t\t\t\tfacet: undefined,\n\t\t\t\tmarks: cellMarks[index],\n\t\t\t\tx: sharedX\n\t\t\t\t\t? { ...spec.x, domain: sharedX.domain, nice: false }\n\t\t\t\t\t: spec.x,\n\t\t\t\ty: sharedY\n\t\t\t\t\t? { ...spec.y, domain: sharedY.domain, nice: false }\n\t\t\t\t\t: spec.y,\n\t\t\t\tcolor: colorDomain\n\t\t\t\t\t? { ...spec.color, domain: colorDomain }\n\t\t\t\t\t: spec.color,\n\t\t\t},\n\t\t\t{ ...cellOptions, width: cellWidth, height: cellHeight - title },\n\t\t);\n\t\tfirst ??= cell;\n\t\tconst dy = y + title;\n\t\tnodes.push(\n\t\t\t{\n\t\t\t\tkind: \"text\",\n\t\t\t\tkey: `facet-title:${key}`,\n\t\t\t\trole: \"facet-title\",\n\t\t\t\tx: x + cell.plot.x,\n\t\t\t\ty,\n\t\t\t\ttext: label(value),\n\t\t\t\tpaint: {\n\t\t\t\t\tfill: theme.foreground,\n\t\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\tbaseline: \"top\",\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkind: \"group\",\n\t\t\t\tkey: `facet:${key}`,\n\t\t\t\ttranslate: { x, y: dy },\n\t\t\t\tchildren: cell.nodes,\n\t\t\t},\n\t\t);\n\t\tfor (const point of cell.points) {\n\t\t\tpoints.push({\n\t\t\t\t...point,\n\t\t\t\tkey: `${key}|${point.key}`,\n\t\t\t\tx: point.x + x,\n\t\t\t\ty: point.y + dy,\n\t\t\t\thit: shifted(point.hit, x, dy),\n\t\t\t\tfacet: key,\n\t\t\t\ttitle: `${label(value)} \u00B7 ${point.title}`,\n\t\t\t});\n\t\t}\n\t\tlegend.push(...cell.legend);\n\t\tcells.push({\n\t\t\tkey,\n\t\t\tlabel: label(value),\n\t\t\tplot: { ...cell.plot, x: cell.plot.x + x, y: cell.plot.y + dy },\n\t\t});\n\t}\n\n\tconst distinctLegend = [\n\t\t...new Map(legend.map((item) => [item.key, item])).values(),\n\t];\n\treturn {\n\t\t...(first ??\n\t\t\tcompileCell({ ...spec, facet: undefined, marks: [] }, cellOptions)),\n\t\twidth,\n\t\theight,\n\t\tplot: { x: 0, y: 0, width, height },\n\t\tnodes,\n\t\tpoints,\n\t\tlegend: distinctLegend,\n\t\tcells,\n\t};\n}\n\n/**\n * Small multiples: the same chart once per value, on a grid, every cell on\n * the same scales. Pass the result as the definition's `facet`.\n */\nexport function facet(options: ChartFacetOptions): ChartFacet {\n\treturn {\n\t\toptions,\n\t\tcompile: (spec, compileOptions) =>\n\t\t\tcompileFacets(spec, options, compileOptions),\n\t};\n}\n"],
+  "mappings": "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",
+  "names": ["facet"]
+}

package/dist/core/format.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Number formatting for axes, labels and tooltips. The whole app writes its
+ * numbers in French, so that is the default here too — pass an explicit locale
+ * when a chart lives on a page that does not.
+ */
+export interface FormatNumberOptions {
+    readonly locale?: string;
+    readonly maximumFractionDigits?: number;
+    readonly minimumFractionDigits?: number;
+}
+export declare function formatNumber(value: number, options?: FormatNumberOptions): string;
+/** "12 k", "3,4 M" — for axis ticks, where width is the scarce resource. */
+export declare function formatCompactNumber(value: number, locale?: string): string;
+export declare function formatPercentage(fraction: number, locale?: string): string;
+/**
+ * What a value axis uses when the caller has no opinion: plain digits until the
+ * numbers get long, compact notation after that, and at most one decimal so a
+ * tick step of 0.5 still reads correctly.
+ */
+export declare function formatTickValue(value: number, locale?: string): string;
+/** Renders an unknown datum field as a label without throwing on `null`. */
+export declare function formatLabel(value: unknown): string;
+/**
+ * A value as a tooltip, the live region or the data table says it: dates in
+ * full, numbers grouped, strings as they are.
+ */
+export declare function formatValue(value: unknown, locale?: string): string;
+export declare function dateFormat(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** A date written in full, for a tooltip or a table cell: "3 mars 2026", with the time when there is one. */
+export declare function formatDate(value: Date, locale: string): string;
+/**
+ * How to write the dates of one channel in full, judged on all of them: a
+ * series of month buckets reads "mars 2026", of years "2026", anything finer
+ * the full date.
+ */
+export declare function dateValueFormatter(values: ReadonlyArray<unknown>, locale: string): ((value: Date) => string) | undefined;
+//# sourceMappingURL=format.d.ts.map

package/dist/core/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/core/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsBH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IACxC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CACxC;AAED,wBAAgB,YAAY,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,mBAAwB,GAC/B,MAAM,CAGR;AAED,4EAA4E;AAC5E,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAuB,GAC7B,MAAM,CAKR;AAED,wBAAgB,gBAAgB,CAC/B,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAuB,GAC7B,MAAM,CAKR;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAuB,GAC7B,MAAM,CAKR;AAED,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAQlD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAC1B,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAuB,GAC7B,MAAM,CAQR;AAID,wBAAgB,UAAU,CACzB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACjC,IAAI,CAAC,cAAc,CAYrB;AAID,6GAA6G;AAC7G,wBAAgB,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAS9D;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CACjC,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,EAC9B,MAAM,EAAE,MAAM,GACZ,CAAC,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,GAAG,SAAS,CAiBvC"}

package/dist/core/format.js

@@ -0,0 +1,108 @@
+const DEFAULT_LOCALE = "fr-FR";
+const COMPACT_THRESHOLD = 1e4;
+const formatterCache = /* @__PURE__ */ new Map();
+function formatterFor(locale, options) {
+  const cacheKey = `${locale}:${JSON.stringify(options)}`;
+  const cached = formatterCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const created = new Intl.NumberFormat(locale, options);
+  formatterCache.set(cacheKey, created);
+  return created;
+}
+function formatNumber(value, options = {}) {
+  const { locale = DEFAULT_LOCALE, ...digits } = options;
+  return formatterFor(locale, digits).format(value);
+}
+function formatCompactNumber(value, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function formatPercentage(fraction, locale = DEFAULT_LOCALE) {
+  return formatterFor(locale, {
+    style: "percent",
+    maximumFractionDigits: 1
+  }).format(fraction);
+}
+function formatTickValue(value, locale = DEFAULT_LOCALE) {
+  if (Math.abs(value) >= COMPACT_THRESHOLD) {
+    return formatCompactNumber(value, locale);
+  }
+  return formatNumber(value, { locale, maximumFractionDigits: 2 });
+}
+function formatLabel(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "number") {
+    return formatTickValue(value);
+  }
+  return String(value);
+}
+function formatValue(value, locale = DEFAULT_LOCALE) {
+  if (value instanceof Date) {
+    return formatDate(value, locale);
+  }
+  if (typeof value === "number") {
+    return formatNumber(value, { locale, maximumFractionDigits: 2 });
+  }
+  return formatLabel(value);
+}
+const formatters = /* @__PURE__ */ new Map();
+function dateFormat(locale, options) {
+  const key = `${locale}:${JSON.stringify(options)}`;
+  const cached = formatters.get(key);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const created = new Intl.DateTimeFormat(locale, {
+    ...options,
+    timeZone: "UTC"
+  });
+  formatters.set(key, created);
+  return created;
+}
+const MS_PER_DAY = 864e5;
+function formatDate(value, locale) {
+  const time = value.getTime();
+  const hasTime = time % MS_PER_DAY !== 0;
+  return dateFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    ...hasTime ? { hour: "2-digit", minute: "2-digit" } : {}
+  }).format(value);
+}
+function dateValueFormatter(values, locale) {
+  const dates = values.filter((value) => value instanceof Date);
+  if (dates.length === 0) {
+    return void 0;
+  }
+  const firstOfMonth = dates.every(
+    (date) => date.getTime() % MS_PER_DAY === 0 && date.getUTCDate() === 1
+  );
+  if (firstOfMonth && dates.every((date) => date.getUTCMonth() === 0)) {
+    const year = dateFormat(locale, { year: "numeric" });
+    return (value) => year.format(value);
+  }
+  if (firstOfMonth) {
+    const month = dateFormat(locale, { month: "long", year: "numeric" });
+    return (value) => month.format(value);
+  }
+  return void 0;
+}
+export {
+  dateFormat,
+  dateValueFormatter,
+  formatCompactNumber,
+  formatDate,
+  formatLabel,
+  formatNumber,
+  formatPercentage,
+  formatTickValue,
+  formatValue
+};
+//# sourceMappingURL=format.js.map

package/dist/core/format.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/core/format.ts"],
+  "sourcesContent": ["/**\n * Number formatting for axes, labels and tooltips. The whole app writes its\n * numbers in French, so that is the default here too \u2014 pass an explicit locale\n * when a chart lives on a page that does not.\n */\n\nconst DEFAULT_LOCALE = \"fr-FR\";\n/** Above this magnitude an axis tick reads better as \"12 k\" than as \"12 000\". */\nconst COMPACT_THRESHOLD = 10_000;\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction formatterFor(\n\tlocale: string,\n\toptions: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n\tconst cacheKey = `${locale}:${JSON.stringify(options)}`;\n\tconst cached = formatterCache.get(cacheKey);\n\tif (cached !== undefined) {\n\t\treturn cached;\n\t}\n\tconst created = new Intl.NumberFormat(locale, options);\n\tformatterCache.set(cacheKey, created);\n\treturn created;\n}\n\nexport interface FormatNumberOptions {\n\treadonly locale?: string;\n\treadonly maximumFractionDigits?: number;\n\treadonly minimumFractionDigits?: number;\n}\n\nexport function formatNumber(\n\tvalue: number,\n\toptions: FormatNumberOptions = {},\n): string {\n\tconst { locale = DEFAULT_LOCALE, ...digits } = options;\n\treturn formatterFor(locale, digits).format(value);\n}\n\n/** \"12 k\", \"3,4 M\" \u2014 for axis ticks, where width is the scarce resource. */\nexport function formatCompactNumber(\n\tvalue: number,\n\tlocale: string = DEFAULT_LOCALE,\n): string {\n\treturn formatterFor(locale, {\n\t\tnotation: \"compact\",\n\t\tmaximumFractionDigits: 1,\n\t}).format(value);\n}\n\nexport function formatPercentage(\n\tfraction: number,\n\tlocale: string = DEFAULT_LOCALE,\n): string {\n\treturn formatterFor(locale, {\n\t\tstyle: \"percent\",\n\t\tmaximumFractionDigits: 1,\n\t}).format(fraction);\n}\n\n/**\n * What a value axis uses when the caller has no opinion: plain digits until the\n * numbers get long, compact notation after that, and at most one decimal so a\n * tick step of 0.5 still reads correctly.\n */\nexport function formatTickValue(\n\tvalue: number,\n\tlocale: string = DEFAULT_LOCALE,\n): string {\n\tif (Math.abs(value) >= COMPACT_THRESHOLD) {\n\t\treturn formatCompactNumber(value, locale);\n\t}\n\treturn formatNumber(value, { locale, maximumFractionDigits: 2 });\n}\n\n/** Renders an unknown datum field as a label without throwing on `null`. */\nexport function formatLabel(value: unknown): string {\n\tif (value === null || value === undefined) {\n\t\treturn \"\";\n\t}\n\tif (typeof value === \"number\") {\n\t\treturn formatTickValue(value);\n\t}\n\treturn String(value);\n}\n\n/**\n * A value as a tooltip, the live region or the data table says it: dates in\n * full, numbers grouped, strings as they are.\n */\nexport function formatValue(\n\tvalue: unknown,\n\tlocale: string = DEFAULT_LOCALE,\n): string {\n\tif (value instanceof Date) {\n\t\treturn formatDate(value, locale);\n\t}\n\tif (typeof value === \"number\") {\n\t\treturn formatNumber(value, { locale, maximumFractionDigits: 2 });\n\t}\n\treturn formatLabel(value);\n}\n\nconst formatters = new Map<string, Intl.DateTimeFormat>();\n\nexport function dateFormat(\n\tlocale: string,\n\toptions: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n\tconst key = `${locale}:${JSON.stringify(options)}`;\n\tconst cached = formatters.get(key);\n\tif (cached !== undefined) {\n\t\treturn cached;\n\t}\n\tconst created = new Intl.DateTimeFormat(locale, {\n\t\t...options,\n\t\ttimeZone: \"UTC\",\n\t});\n\tformatters.set(key, created);\n\treturn created;\n}\n\nconst MS_PER_DAY = 86_400_000;\n\n/** A date written in full, for a tooltip or a table cell: \"3 mars 2026\", with the time when there is one. */\nexport function formatDate(value: Date, locale: string): string {\n\tconst time = value.getTime();\n\tconst hasTime = time % MS_PER_DAY !== 0;\n\treturn dateFormat(locale, {\n\t\tday: \"numeric\",\n\t\tmonth: \"long\",\n\t\tyear: \"numeric\",\n\t\t...(hasTime ? { hour: \"2-digit\", minute: \"2-digit\" } : {}),\n\t}).format(value);\n}\n\n/**\n * How to write the dates of one channel in full, judged on all of them: a\n * series of month buckets reads \"mars 2026\", of years \"2026\", anything finer\n * the full date.\n */\nexport function dateValueFormatter(\n\tvalues: ReadonlyArray<unknown>,\n\tlocale: string,\n): ((value: Date) => string) | undefined {\n\tconst dates = values.filter((value): value is Date => value instanceof Date);\n\tif (dates.length === 0) {\n\t\treturn undefined;\n\t}\n\tconst firstOfMonth = dates.every(\n\t\t(date) => date.getTime() % MS_PER_DAY === 0 && date.getUTCDate() === 1,\n\t);\n\tif (firstOfMonth && dates.every((date) => date.getUTCMonth() === 0)) {\n\t\tconst year = dateFormat(locale, { year: \"numeric\" });\n\t\treturn (value) => year.format(value);\n\t}\n\tif (firstOfMonth) {\n\t\tconst month = dateFormat(locale, { month: \"long\", year: \"numeric\" });\n\t\treturn (value) => month.format(value);\n\t}\n\treturn undefined;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/core/guides/axes.d.ts

@@ -0,0 +1,25 @@
+import type { ChartAxisOptions } from "../define-chart.js";
+import type { ChartPositionScale, ChartRect, ChartTextMeasurer, ChartTheme, ChartValue, SceneNode } from "../types.js";
+export interface AxisMeasureInput {
+    readonly scale: ChartPositionScale;
+    readonly options: ChartAxisOptions | undefined;
+    readonly title: string | undefined;
+    readonly theme: ChartTheme;
+    readonly measureText: ChartTextMeasurer;
+}
+export declare function axisTicks(scale: ChartPositionScale, options: ChartAxisOptions | undefined): ReadonlyArray<ChartValue>;
+export declare function tickLabel(scale: ChartPositionScale, options: ChartAxisOptions | undefined, value: ChartValue): string;
+/** Cuts a label down to `maxWidth`, ending on an ellipsis. */
+export declare function truncate(text: string, maxWidth: number, fontSize: number, measureText: ChartTextMeasurer): string;
+/** Room the left axis needs: its widest tick label, the gap, and the title. */
+export declare function leftMargin(input: AxisMeasureInput, chartWidth: number): number;
+export declare function bottomMargin(input: AxisMeasureInput): number;
+/** Half the last x label hangs past the plot's right edge; leave it room. */
+export declare function rightMargin(input: AxisMeasureInput): number;
+export interface AxisNodes {
+    readonly grid: ReadonlyArray<SceneNode>;
+    readonly labels: ReadonlyArray<SceneNode>;
+}
+export declare function bottomAxis(input: AxisMeasureInput, plot: ChartRect, grid: boolean): AxisNodes;
+export declare function leftAxis(input: AxisMeasureInput, plot: ChartRect, grid: boolean, chartWidth: number): AxisNodes;
+//# sourceMappingURL=axes.d.ts.map

package/dist/core/guides/axes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../src/core/guides/axes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EACX,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,SAAS,EACT,MAAM,iBAAiB,CAAC;AAgBzB,MAAM,WAAW,gBAAgB;IAChC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;CACxC;AAED,wBAAgB,SAAS,CACxB,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,gBAAgB,GAAG,SAAS,GACnC,aAAa,CAAC,UAAU,CAAC,CAM3B;AAED,wBAAgB,SAAS,CACxB,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,gBAAgB,GAAG,SAAS,EACrC,KAAK,EAAE,UAAU,GACf,MAAM,CAER;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,iBAAiB,GAC5B,MAAM,CASR;AAMD,+EAA+E;AAC/E,wBAAgB,UAAU,CACzB,KAAK,EAAE,gBAAgB,EACvB,UAAU,EAAE,MAAM,GAChB,MAAM,CAgBR;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAW5D;AAED,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAa3D;AAED,MAAM,WAAW,SAAS;IACzB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACxC,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAC1C;AAsBD,wBAAgB,UAAU,CACzB,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,OAAO,GACX,SAAS,CAwDX;AAED,wBAAgB,QAAQ,CACvB,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,MAAM,GAChB,SAAS,CAmEX"}