@k2b/editor 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -70,7 +70,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.50.0",
+    "@k2b/ui": "0.52.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/chart-schema.ts

@@ -1,12 +1,10 @@
-import { chartLocaleSchema } from "./chart-locale";
-
-export { chartAcceptsLocale, chartLocaleSchema } from "./chart-locale";
-
+import type { ChartInput, ChartLimits } from "@k2b/ui/charts";
 import { CALENDAR_MAX_DAYS, calendarDay } from "@k2b/ui/charts/core";
 import { z } from "zod";
+import { chartLocaleSchema } from "./chart-locale";
 
-/** Optional caller policy. Rendering itself has no AI input budget. */
-export type ChartLimits = { maxSeries: number; maxValues: number; maxMarks: number };
+export type { ChartDateFormat, ChartDescription, ChartFormat, ChartInput, ChartLimits, ChartNumberFormat } from "@k2b/ui/charts";
+export { chartAcceptsLocale, chartLocaleSchema } from "./chart-locale";
 
 // Every chart schema is built by a function whose call is marked pure, so a bundle that imports neither chart contract
 // leaves them out. App frames include the app contract through `cloud.chart()`.
@@ -31,12 +29,29 @@ export const chartNumberFormatSchema = () =>
 const dateFormatSchema = () => z.strictObject({ date: z.enum(["day", "minute", "second"]) });
 export const chartFormatSchema = () => z.union([chartNumberFormatSchema(), dateFormatSchema()]);
 
-export type ChartNumberFormat = z.output<ReturnType<typeof chartNumberFormatSchema>>;
-export type ChartDateFormat = z.output<ReturnType<typeof dateFormatSchema>>;
-export type ChartFormat = ChartNumberFormat | ChartDateFormat;
-
 export const chartKindSchema = () =>
-  z.enum(["area", "bar", "line", "scatter", "pie", "donut", "histogram", "gauge", "sparkline", "boxplot", "heatmap", "barGauge", "stat"]);
+  z.enum([
+    "waterfall",
+    "area",
+    "bar",
+    "hbar",
+    "funnel",
+    "line",
+    "scatter",
+    "pie",
+    "donut",
+    "histogram",
+    "gauge",
+    "sparkline",
+    "boxplot",
+    "heatmap",
+    "barGauge",
+    "stat",
+    "treemap",
+    "pareto",
+    "bubble",
+    "radar",
+  ]);
 
 export const chartParts = (limits?: ChartLimits) => {
   const ChartLabel = limits ? z.string().trim().min(1).max(80) : z.union([z.string(), z.number().transform(String)]);
@@ -154,6 +169,27 @@ export const chartKinds = (limits?: ChartLimits) => {
   const ChartKindCommon = { ...ChartCommon, tooltip: ChartTooltip.optional() };
   const numberFormat = chartNumberFormatSchema();
   return z.discriminatedUnion("kind", [
+    z
+      .object({
+        kind: z.literal("waterfall"),
+        ...ChartKindCommon,
+        start: z.object({ label: ChartLabel, value: z.number() }),
+        steps: list(z.object({ label: ChartLabel, value: z.number() }), 0, limits?.maxValues),
+        end: z.strictObject({ label: ChartLabel }),
+        format: numberFormat.optional(),
+      })
+      .superRefine((spec, ctx) => {
+        let balance = spec.start.value;
+        let lo = Math.min(0, balance),
+          hi = Math.max(0, balance);
+        for (const step of spec.steps) {
+          balance += step.value;
+          lo = Math.min(lo, balance);
+          hi = Math.max(hi, balance);
+        }
+        if (!Number.isFinite(balance) || !Number.isFinite(hi - lo))
+          ctx.addIssue({ code: "custom", message: "Waterfall balances must form a finite range." });
+      }),
     z
       .object({
         kind: z.literal("area"),
@@ -175,17 +211,79 @@ export const chartKinds = (limits?: ChartLimits) => {
           if (!Number.isFinite(sum)) ctx.addIssue({ code: "custom", path: ["x", i], message: "Area totals must be finite." });
         });
       }),
+    z
+      .object({
+        kind: z.literal("bar"),
+        ...ChartKindCommon,
+        data: list(ChartCategory, 0, limits?.maxValues).default([]),
+        x: list(ChartLabel, 0, limits?.maxValues).optional(),
+        series: list(
+          z.object({ label: ChartLabel, data: list(ChartNumber.nullable(), 0, limits?.maxValues) }),
+          1,
+          limits?.maxSeries,
+        ).optional(),
+        layout: z.enum(["columns", "rows", "grouped", "stacked"]).optional(),
+        normalize: z.boolean().optional(),
+        share: z.boolean().optional(),
+        limit: z.number().int().positive().optional(),
+        tone: z.enum(["in", "out"]).optional(),
+        format: numberFormat.optional(),
+        compare: z.object({ label: ChartLabel, data: list(ChartNumber.nullable(), 0, limits?.maxValues) }).optional(),
+        xAxis: ChartAxis.pick({ label: true }).extend({ ordered: z.boolean().optional() }).strict().optional(),
+        yAxis: ChartAxis.optional(),
+        colorByBar: z.boolean().optional(),
+        showValues: z.boolean().optional(),
+        legend: z.boolean().optional(),
+        references: ChartReferences.optional(),
+      })
+      .superRefine((bar, ctx) => {
+        const issue = (message: string) => ctx.addIssue({ code: "custom", message });
+        if (limits && !bar.series && !bar.data.length)
+          ctx.addIssue({ code: "custom", path: ["data"], message: "A bar chart needs data or aligned series." });
+        if ((bar.share !== undefined || bar.limit !== undefined || bar.tone !== undefined) && bar.layout !== "rows")
+          issue("Share, limit and tone require rows layout.");
+        if (bar.layout === "rows" && bar.data.some((d) => Number.isFinite(d.value) && d.value < 0))
+          issue("Ranked bar lists require nonnegative values.");
+        if (bar.series) {
+          if (!bar.x || bar.series.some((s) => s.data.length !== bar.x?.length)) issue("Bar series must have the same length as x.");
+          if (bar.data.length) issue("Use data or aligned series, not both.");
+          if (bar.layout === "rows" || bar.layout === "columns") issue("Series bars use grouped or stacked layout.");
+        } else if (bar.x || bar.compare || bar.layout === "grouped" || bar.layout === "stacked")
+          issue("This layout needs aligned x and series.");
+        if (bar.layout === "stacked" && bar.yAxis?.scale === "log") issue("Stacked bars need a linear axis.");
+        if (bar.normalize && bar.layout !== "stacked") issue("Normalized bars must be stacked.");
+        if (bar.layout === "stacked" && bar.series?.some((s) => s.data.some((v) => v !== null && v < 0)))
+          issue("Stacked bars require nonnegative values.");
+        if (bar.compare && (bar.series?.length !== 1 || bar.compare.data.length !== bar.x?.length || bar.layout === "stacked"))
+          issue("Comparison needs one current series and aligned previous values.");
+      }),
     z.object({
-      kind: z.literal("bar"),
+      kind: z.literal("funnel"),
       ...ChartKindCommon,
-      data: list(ChartCategory, 1, limits?.maxValues),
-      xAxis: ChartAxis.pick({ label: true }).strict().optional(),
-      yAxis: ChartAxis.optional(),
-      colorByBar: z.boolean().optional(),
-      showValues: z.boolean().optional(),
-      legend: z.boolean().optional(),
-      references: ChartReferences.optional(),
+      data: list(z.object({ label: ChartLabel, value: z.number().nonnegative().nullable() }), 1, limits?.maxValues),
+      format: numberFormat.optional(),
     }),
+    z
+      .object({
+        kind: z.literal("hbar"),
+        ...ChartKindCommon,
+        series: list(ChartLabel, 1, limits?.maxSeries),
+        rows: list(
+          z.object({
+            group: ChartLabel.optional(),
+            label: ChartLabel,
+            values: list(z.number().nonnegative().nullable(), 0, limits?.maxSeries),
+          }),
+          1,
+          limits?.maxValues,
+        ),
+        legend: z.boolean().optional(),
+        format: numberFormat.optional(),
+      })
+      .superRefine((bar, ctx) => {
+        if (bar.rows.some((r) => r.values.length !== bar.series.length))
+          ctx.addIssue({ code: "custom", message: "Horizontal bar values must match series." });
+      }),
     z.object({
       kind: z.literal("line"),
       ...ChartKindCommon,
@@ -319,6 +417,81 @@ export const chartKinds = (limits?: ChartLimits) => {
       better: z.enum(["up", "down"]).optional(),
       sparkline: list(ChartNumber, 2, limits?.maxValues).optional(),
     }),
+    z
+      .object({
+        kind: z.literal("treemap"),
+        ...ChartKindCommon,
+        groups: list(ChartLabel, 1, limits?.maxSeries),
+        data: list(z.object({ label: ChartLabel, group: ChartLabel, value: z.number().nonnegative() }), 1, limits?.maxMarks),
+        legend: z.boolean().optional(),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (!Number.isFinite(spec.data.reduce((sum, d) => sum + d.value, 0)))
+          ctx.addIssue({ code: "custom", message: "Treemap total must be finite." });
+        if (spec.data.some((d) => !spec.groups.includes(d.group)))
+          ctx.addIssue({ code: "custom", message: "Treemap groups must contain every item group." });
+      }),
+    z
+      .object({
+        kind: z.literal("pareto"),
+        ...ChartKindCommon,
+        labels: z.tuple([ChartLabel, ChartLabel]),
+        data: list(z.object({ label: ChartLabel, value: z.number().nonnegative(), prev: z.number().nonnegative() }), 1, limits?.maxValues),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (!Number.isFinite(spec.data.reduce((sum, d) => sum + d.value, 0)))
+          ctx.addIssue({ code: "custom", message: "Pareto total must be finite." });
+      }),
+    z
+      .object({
+        kind: z.literal("bubble"),
+        ...ChartKindCommon,
+        groups: list(ChartLabel, 1, limits?.maxSeries),
+        data: list(
+          z.object({ label: ChartLabel, group: ChartLabel, x: z.number(), y: z.number(), size: z.number().nonnegative().optional() }),
+          1,
+          limits?.maxMarks,
+        ),
+        xLabel: ChartLabel,
+        yLabel: ChartLabel,
+        sizeLabel: ChartLabel.optional(),
+        averages: z.boolean().optional(),
+        legend: z.boolean().optional(),
+        xFormat: numberFormat.optional(),
+        yFormat: numberFormat.optional(),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (spec.data.some((p) => !spec.groups.includes(p.group)))
+          ctx.addIssue({ code: "custom", message: "Bubble groups must contain every point group." });
+        for (const key of ["x", "y"] as const)
+          if (!Number.isFinite(Math.max(0, ...spec.data.map((p) => p[key])) - Math.min(0, ...spec.data.map((p) => p[key]))))
+            ctx.addIssue({ code: "custom", message: "Bubble coordinate ranges must be finite." });
+      }),
+    z
+      .object({
+        kind: z.literal("radar"),
+        ...ChartKindCommon,
+        axes: z.array(ChartLabel).min(3).max(8),
+        max: z.number().positive(),
+        unit: ChartUnit.optional(),
+        series: z
+          .array(z.object({ label: ChartLabel, data: z.array(z.number().nonnegative()).min(3).max(8) }))
+          .min(1)
+          .max(4),
+        format: numberFormat.optional(),
+        legend: z.boolean().optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (spec.series.some((s) => s.data.length !== spec.axes.length || s.data.some((v) => v > spec.max)))
+          ctx.addIssue({ code: "custom", message: "Radar series need one value per axis between zero and the common maximum." });
+      }),
   ]);
 };
 
@@ -339,5 +512,10 @@ export const chartDateTime = (value: string): number | undefined => {
   return date.toISOString().startsWith(`${year}-${month}-${day}T${hour}:${minute}:${second}`) ? date.getTime() : undefined;
 };
 
-/** One chart as the shared renderers read it. */
-export type ChartInput = z.output<ReturnType<typeof chartKinds>>;
+// Both directions are checked: a validator change must update the ui-owned description too.
+type Assert<T extends true> = T;
+type Same<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false;
+type _ChartSchemaMatchesDescription = Assert<Same<z.output<ReturnType<typeof chartKinds>>, ChartInput>>;
+type _ChartNumberFormatSchemaMatchesDescription = Assert<
+  Same<z.output<ReturnType<typeof chartNumberFormatSchema>>, import("@k2b/ui/charts").ChartNumberFormat>
+>;

package/src/charts.ts

@@ -4,6 +4,7 @@ import {
   type AreaOptions,
   autoBin,
   type BarChartOptions,
+  type BubbleOptions,
   barChartLayout,
   barGauge,
   boxplot,
@@ -13,19 +14,34 @@ import {
   computeDomain,
   donut,
   extendDomainToNice,
+  type FunnelOptions,
   gauge,
   type HeatmapChartOptions,
+  type HorizontalBarOptions,
+  hbarLayout,
   histogram,
   line,
   niceLogTicks,
   niceStep,
+  type ParetoOptions,
   pie,
+  type RadarOptions,
+  rankedBarLayout,
   renderAreaSvg,
   renderBarChartSvg,
+  renderBubbleSvg,
+  renderFunnelSvg,
+  renderHbarSvg,
   renderHeatmapSvg,
+  renderParetoSvg,
+  renderRadarSvg,
+  renderTreemapSvg,
+  renderWaterfallSvg,
   scatter,
   sparkline,
   stat,
+  type TreemapOptions,
+  type WaterfallOptions,
 } from "@k2b/ui/charts/core";
 import { z } from "zod";
 import { type ChartFormat, type ChartInput, type ChartNumberFormat, chartDateTime, chartKinds } from "./chart-schema";
@@ -33,15 +49,29 @@ import { type ChartFormat, type ChartInput, type ChartNumberFormat, chartDateTim
 export * from "./chart-schema";
 
 type RenderOptions = {
-  [K in ChartInput["kind"]]: { kind: K } & (K extends "area"
-    ? AreaOptions
-    : K extends "heatmap"
-      ? HeatmapChartOptions
-      : K extends "bar"
-        ? BarChartOptions
-        : K extends keyof typeof charts
-          ? Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">
-          : never);
+  [K in ChartInput["kind"]]: { kind: K } & (K extends "funnel"
+    ? FunnelOptions
+    : K extends "hbar"
+      ? HorizontalBarOptions
+      : K extends "waterfall"
+        ? WaterfallOptions
+        : K extends "area"
+          ? AreaOptions
+          : K extends "treemap"
+            ? TreemapOptions
+            : K extends "pareto"
+              ? ParetoOptions
+              : K extends "bubble"
+                ? BubbleOptions
+                : K extends "radar"
+                  ? RadarOptions
+                  : K extends "heatmap"
+                    ? HeatmapChartOptions
+                    : K extends "bar"
+                      ? BarChartOptions & { data: NonNullable<BarChartOptions["data"]> }
+                      : K extends keyof typeof charts
+                        ? Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">
+                        : never);
 }[ChartInput["kind"]];
 
 /**
@@ -56,8 +86,20 @@ const labels = /* @__PURE__ */ i18n.define({
   messages: {
     en: {
       category: "Category",
+      size: "Size",
+      axis: "Axis",
       series: "Series",
+      group: "Group",
+      previous: "Previous",
+      change: "Change",
+      cumulative: "Cumulative",
+      balance: "Balance",
+      before: "Balance before",
+      inflow: "In",
+      outflow: "Out",
+      after: "Balance after",
       value: "Value",
+      total: "Total",
       share: "Share",
       position: "Position",
       from: "From",
@@ -71,11 +113,26 @@ const labels = /* @__PURE__ */ i18n.define({
       whiskerLow: "Whisker low",
       whiskerHigh: "Whisker high",
       delta: "Change",
+      startShare: "Share of start",
+      previousShare: "Share of previous step",
+      rank: "Rank",
     },
     de: {
       category: "Kategorie",
+      size: "Größe",
+      axis: "Achse",
       series: "Datenreihe",
+      group: "Bereich",
+      previous: "Vorher",
+      change: "Änderung",
+      cumulative: "Kumuliert",
+      balance: "Stand",
+      before: "Stand davor",
+      inflow: "Rein",
+      outflow: "Raus",
+      after: "Stand danach",
       value: "Wert",
+      total: "Gesamt",
       share: "Anteil",
       position: "Position",
       from: "Von",
@@ -89,6 +146,9 @@ const labels = /* @__PURE__ */ i18n.define({
       whiskerLow: "Unterer Whisker",
       whiskerHigh: "Oberer Whisker",
       delta: "Änderung",
+      startShare: "Anteil am Start",
+      previousShare: "Anteil am vorigen Schritt",
+      rank: "Rang",
     },
   },
 });
@@ -137,7 +197,19 @@ export const chartReferenceValues = (input: ChartInput, name: "x" | "y") =>
 
 /** The value axes of a chart with what they show: the data checks and the label room read them alike. */
 export const chartValueAxes = (input: ChartInput): { values: number[]; axis?: ChartAxisInput; zero?: boolean; name: "x" | "y" }[] => {
-  if (input.kind === "bar") return [{ values: input.data.map((item) => item.value), axis: input.yAxis, zero: true, name: "y" }];
+  if (input.kind === "bar")
+    return [
+      {
+        values: [
+          ...input.data.map((item) => item.value),
+          ...(input.series?.flatMap((s) => s.data.filter((v): v is number => v !== null)) ?? []),
+          ...(input.compare?.data.filter((v): v is number => v !== null) ?? []),
+        ],
+        axis: input.yAxis,
+        zero: true,
+        name: "y",
+      },
+    ];
   if (input.kind === "boxplot") return [{ values: input.data.flatMap((item) => item.values), axis: input.yAxis, name: "y" }];
   if (input.kind === "histogram") {
     if (!input.references?.length) return [{ values: input.data, name: "x" }];
@@ -246,13 +318,30 @@ const numberFormat = (format: ChartFormat | undefined) => (format && !("date" in
 /** The values a chart writes with its value format, for whole-number currency. */
 const formattedValues = (input: ChartInput): number[] => {
   switch (input.kind) {
+    case "bubble":
+      return input.data.flatMap((p) => (p.size === undefined ? [] : [p.size]));
+    case "radar":
+      return input.series.flatMap((s) => s.data);
+    case "waterfall":
+      return [input.start.value, ...input.steps.map((step) => step.value)];
     case "area":
       return input.series.flatMap((s) => s.data.filter((v): v is number => v !== null));
     case "line":
     case "scatter":
       return [...input.series.flatMap((series) => series.data.map((point) => point.y)), ...chartReferenceValues(input, "y")];
     case "bar":
-      return [...input.data.map((item) => item.value), ...chartReferenceValues(input, "y")];
+      return [
+        ...input.data.map((item) => item.value),
+        ...(input.series?.flatMap((s) => s.data.filter((v): v is number => v !== null)) ?? []),
+        ...(input.compare?.data.filter((v): v is number => v !== null) ?? []),
+        ...chartReferenceValues(input, "y"),
+      ];
+    case "hbar":
+      return input.rows.flatMap((r) => r.values.filter((v): v is number => v !== null));
+    case "funnel":
+      return input.data.flatMap((d) => (d.value === null ? [] : [d.value]));
+    case "treemap":
+    case "pareto":
     case "pie":
     case "donut":
       return input.data.map((item) => item.value);
@@ -276,7 +365,7 @@ const formattedValues = (input: ChartInput): number[] => {
   }
 };
 const formats = (input: ChartInput, locale: string): Formats => {
-  const yFormat = "yAxis" in input ? numberFormat(input.yAxis?.format) : "format" in input ? input.format : undefined;
+  const yFormat = ("yAxis" in input ? numberFormat(input.yAxis?.format) : undefined) ?? ("format" in input ? input.format : undefined);
   const y = chartNumberFormatters(yFormat, locale, formattedValues(input));
   const xFormat = "xAxis" in input && input.kind !== "bar" ? input.xAxis?.format : undefined;
   const x = chartNumberFormatters(numberFormat(xFormat), locale);
@@ -323,6 +412,8 @@ export function chartLegend(
   input: ChartInput,
   locale: string,
 ): { label: string; color: number; style?: "solid" | "dashed" | "dotted"; reference?: boolean }[] {
+  // These category renderers own their live legends, including prepared snapshots.
+  if (input.kind === "hbar" || (input.kind === "bar" && input.series)) return [];
   if (input.kind === "bar")
     return input.colorByBar && input.legend ? input.data.map((entry, index) => ({ label: entry.label, color: index % 8 })) : [];
   if (input.kind === "area") return input.legend === false ? [] : input.series.map((s, i) => ({ label: s.label, color: i % 8 }));
@@ -354,7 +445,7 @@ export function chartRenderOptions(
     formats?: { x?: (v: number) => string; y?: (v: number) => string; value?: (v: number) => string };
   } = {},
 ): RenderOptions {
-  if (input.kind === "heatmap" && input.layout === "calendar") locale = input.locale ?? locale;
+  if ("locale" in input && input.locale) locale = input.locale;
   const defaults = formats(input, locale);
   // Function formats must be measured with the same text the renderer will print.
   const format = {
@@ -367,6 +458,74 @@ export function chartRenderOptions(
   const width = options.width ?? WIDTH;
   const references = renderReferences(input);
   switch (input.kind) {
+    case "treemap":
+      return {
+        kind: "treemap",
+        legend: input.legend,
+        groups: input.groups,
+        data: input.data,
+        format: format.value,
+        locale: input.locale ?? locale,
+        displayWidth: options.width,
+      };
+    case "pareto":
+      return {
+        kind: "pareto",
+        labels: input.labels,
+        data: input.data,
+        format: format.value,
+        locale: input.locale ?? locale,
+        displayWidth: options.width,
+      };
+    case "bubble":
+      return {
+        kind: "bubble",
+        groups: input.groups,
+        data: input.data,
+        xLabel: input.xLabel,
+        yLabel: input.yLabel,
+        sizeLabel: input.sizeLabel,
+        averages: input.averages,
+        legend: input.legend,
+        locale,
+        displayWidth: options.width,
+        xFormat: options.formats?.x ?? (input.xFormat ? chartNumberFormatters(input.xFormat, locale).value : undefined),
+        yFormat: options.formats?.y ?? (input.yFormat ? chartNumberFormatters(input.yFormat, locale).value : undefined),
+        sizeFormat: format.value,
+      };
+    case "radar":
+      return {
+        kind: "radar",
+        axes: input.axes,
+        max: input.max,
+        unit: input.unit,
+        series: input.series,
+        legend: input.legend,
+        locale,
+        displayWidth: options.width,
+        format: format.value,
+      };
+    case "funnel":
+      return { kind: "funnel", data: input.data, valueFormat: format.value, locale };
+    case "hbar":
+      return {
+        kind: "hbar",
+        locale,
+        series: input.series,
+        rows: input.rows,
+        legend: input.legend,
+        valueFormat: format.value,
+      };
+    case "waterfall":
+      return {
+        kind: "waterfall",
+        start: input.start,
+        steps: input.steps,
+        end: input.end,
+        displayWidth: options.width ?? 296,
+        locale,
+        format: format.value,
+      };
     case "area":
       return {
         kind: "area",
@@ -386,14 +545,23 @@ export function chartRenderOptions(
       if (input.kind === "bar")
         return {
           kind: "bar",
+          locale,
           data: input.data,
+          x: input.x,
+          series: input.series,
+          layout: input.layout,
+          normalize: input.normalize,
+          share: input.share,
+          limit: input.limit,
+          tone: input.tone,
+          compare: input.compare,
           xAxis: input.xAxis,
           yAxis: axis(yAxis, options.formats?.y ?? format.tick),
           // A host's own function format writes printed values like its ticks and table cells.
           valueFormat: options.formats?.value ?? options.formats?.y ?? format.value,
           colorByBar: input.colorByBar,
           showValues: input.showValues,
-          legend: options.legend === "outside" ? false : input.legend,
+          legend: input.series ? input.legend : options.legend === "outside" ? false : input.legend,
           references,
           ...(options.width === undefined ? {} : { displayWidth: options.width }),
         };
@@ -545,6 +713,20 @@ const decode = (value: string) =>
 export const drawChart = (options: RenderOptions): string => {
   const common = { width: WIDTH, height: HEIGHT, inspect: true };
   switch (options.kind) {
+    case "treemap":
+      return renderTreemapSvg({ ...options, ...common });
+    case "pareto":
+      return renderParetoSvg({ ...options, ...common });
+    case "bubble":
+      return renderBubbleSvg({ ...options, ...common });
+    case "radar":
+      return renderRadarSvg({ ...options, ...common });
+    case "funnel":
+      return renderFunnelSvg({ ...options, ...common });
+    case "hbar":
+      return renderHbarSvg({ ...options, ...common, height: hbarLayout(options).height });
+    case "waterfall":
+      return renderWaterfallSvg({ ...options, ...common });
     case "area":
       return renderAreaSvg({ ...options, ...common });
     case "bar":
@@ -594,7 +776,12 @@ export const chartMarkKey = (datum: Pick<ChartDatum, "index" | "seriesIndex"> &
   `${datum.role === "outlier" ? "outlier:" : datum.role === "value" ? "value:" : ""}${datum.seriesIndex ?? 0}:${datum.index}`;
 
 export type ChartColumn = { id: string; label: string; numeric: boolean };
-export type ChartRow = { key: string; cells: Record<string, string>; values: Record<string, string | number> };
+export type ChartRow = {
+  key: string;
+  cells: Record<string, string>;
+  values: Record<string, string | number>;
+  tooltip?: { title?: string; rows: { label: string; value: string }[] };
+};
 export type ChartTable = { columns: ChartColumn[]; rows: ChartRow[] };
 
 /** The first text column titles the tooltip; the other columns become rows, matching the table in every host. */
@@ -603,6 +790,7 @@ export function chartTooltip(
   row: ChartRow,
   kind?: ChartInput["kind"],
 ): { title?: string; rows: { label: string; value: string }[] } {
+  if (row.tooltip) return row.tooltip;
   if (kind === "area")
     return {
       title: row.cells.x,
@@ -627,7 +815,7 @@ export function chartRows(
   locale: string,
   options: { formats?: { x?: (v: number) => string; y?: (v: number) => string; value?: (v: number) => string } } = {},
 ) {
-  if (input.kind === "heatmap" && input.layout === "calendar") locale = input.locale ?? locale;
+  if ("locale" in input && input.locale) locale = input.locale;
   const t = labels.resolve([locale]).t;
   const format = formats(input, locale);
   const valueFormat = input.tooltip?.format
@@ -644,12 +832,23 @@ export function chartRows(
   const unit = "unit" in input && input.unit ? ` ${input.unit}` : "";
   const columns = new Map<string, ChartColumn>();
   const rows: ChartRow[] = [];
+  if (input.kind === "waterfall") {
+    for (const [id, label, numeric] of [
+      ["label", t.category, false],
+      ["before", t.before, true],
+      ["inflow", t.inflow, true],
+      ["outflow", t.outflow, true],
+      ["after", t.after, true],
+    ] as const)
+      columns.set(id, { id, label, numeric });
+  }
   const named = series.some((entry) => entry.label);
   const add = (datum: ChartDatum): ChartRow => {
+    const tooltip = input.kind === "waterfall" ? { title: datum.label, rows: [] as { label: string; value: string }[] } : undefined;
     const cells: Record<string, string> = {};
     const values: Record<string, string | number> = {};
-    const cell = (id: string, label: string, value: string | number, text: string) => {
-      if (!columns.has(id)) columns.set(id, { id, label, numeric: typeof value === "number" });
+    const cell = (id: string, label: string, value: string | number, text: string, numeric = typeof value === "number") => {
+      if (!columns.has(id)) columns.set(id, { id, label, numeric });
       cells[id] = text;
       values[id] = value;
     };
@@ -663,13 +862,40 @@ export function chartRows(
       // Bars may hide some axis labels; the table names every category.
       const label =
         input.kind === "bar" || input.kind === "pie" || input.kind === "donut" || input.kind === "boxplot" || input.kind === "barGauge"
-          ? input.data[datum.role === "outlier" ? (datum.seriesIndex ?? 0) : datum.index]?.label
+          ? ((input.kind === "bar" && input.series
+              ? undefined
+              : input.data[datum.role === "outlier" ? (datum.seriesIndex ?? 0) : datum.index]?.label) ?? datum.label)
           : datum.label;
       if (label)
-        cell("label", input.kind === "heatmap" && input.layout === "calendar" ? calendarWords(locale).day : t.category, label, label);
+        cell(
+          "label",
+          input.kind === "heatmap" && input.layout === "calendar"
+            ? calendarWords(locale).day
+            : input.kind === "radar"
+              ? t.axis
+              : t.category,
+          label,
+          label,
+        );
     }
     for (const field of datum.values) {
       const value = field.value;
+      if (input.kind === "bubble") {
+        const label =
+          field.key === "x"
+            ? input.xLabel
+            : field.key === "y"
+              ? input.yLabel
+              : field.key === "size"
+                ? (input.sizeLabel ?? t.size)
+                : t.group;
+        cell(field.key, label, value, field.formatted ?? String(value));
+        continue;
+      }
+      if (input.kind === "radar" && field.key.startsWith("series:")) {
+        cell(field.key, input.series[Number(field.key.slice(7))]!.label, value, field.formatted ?? String(value));
+        continue;
+      }
       if (typeof value === "string" && input.kind === "area" && field.key === "x") {
         cell("x", t.position, value, field.formatted ?? value);
         continue;
@@ -678,8 +904,79 @@ export function chartRows(
         cell(field.key, field.key.toUpperCase(), value, value);
         continue;
       }
+      if (input.kind === "treemap" && field.key === "group" && typeof value === "string") {
+        cell("group", t.group, value, value);
+        continue;
+      }
+      if (
+        input.kind === "pareto" &&
+        (field.key === "previous" || field.key === "change" || field.key === "cumulative") &&
+        typeof value === "number"
+      ) {
+        cell(field.key, field.key === "previous" ? input.labels[1] : t[field.key], value, field.formatted ?? valueFormat(value));
+        continue;
+      }
+      if (input.kind === "hbar" || (input.kind === "bar" && input.series)) {
+        const seriesIndex = field.key.startsWith("series:") ? Number(field.key.slice(7)) : undefined;
+        const label =
+          seriesIndex === undefined
+            ? field.key === "previous" && input.kind === "bar"
+              ? (input.compare?.label ?? field.key)
+              : field.key === "total"
+                ? t.total
+                : field.key === "delta"
+                  ? t.delta
+                  : field.key
+            : input.kind === "hbar"
+              ? input.series[seriesIndex]!
+              : input.series![seriesIndex]!.label;
+        cell(field.key, label, value, field.formatted ?? String(value), true);
+        continue;
+      }
+      if (
+        field.key === "startPercent" ||
+        field.key === "previousPercent" ||
+        field.key === "rank" ||
+        ((input.kind === "bar" || input.kind === "funnel") && typeof value === "string")
+      ) {
+        cell(
+          field.key,
+          field.key === "startPercent"
+            ? t.startShare
+            : field.key === "previousPercent"
+              ? t.previousShare
+              : field.key === "rank"
+                ? t.rank
+                : field.key === "percent"
+                  ? t.share
+                  : t.value,
+          value,
+          field.formatted ?? String(value),
+          true,
+        );
+        continue;
+      }
       if (typeof value !== "number" || field.key === "total") continue;
-      if (field.key === "x") {
+      if (input.kind === "waterfall" && ["balance", "before", "inflow", "outflow", "change", "after"].includes(field.key)) {
+        const label =
+          field.key === "balance"
+            ? t.balance
+            : field.key === "before"
+              ? t.before
+              : field.key === "inflow"
+                ? t.inflow
+                : field.key === "outflow"
+                  ? t.outflow
+                  : field.key === "after"
+                    ? t.after
+                    : t.delta;
+        const arrow = field.key === "inflow" ? "↙ " : field.key === "outflow" ? "↗ " : field.key === "change" ? "= " : "";
+        const text = `${arrow}${valueFormat(field.key === "inflow" || field.key === "outflow" ? Math.abs(value) : value)}`;
+        // Totals occupy the ending balance column; zero changes are neutral inflows.
+        const id = field.key === "balance" ? "after" : field.key === "change" ? "inflow" : field.key;
+        cell(id, label, value, text);
+        if (field.key !== "before") tooltip?.rows.push({ label, value: text });
+      } else if (field.key === "x") {
         const header =
           (input.kind === "line" || input.kind === "scatter" ? input.xAxis?.label : undefined) ??
           (input.kind === "area" ? t.position : "X");
@@ -703,11 +1000,13 @@ export function chartRows(
         cell(
           "value",
           input.tooltip?.label ??
-            (input.kind === "bar"
-              ? input.yAxis?.label
-              : input.kind === "heatmap" && input.layout === "calendar"
-                ? input.label
-                : undefined) ??
+            (input.kind === "pareto"
+              ? input.labels[0]
+              : input.kind === "bar"
+                ? input.yAxis?.label
+                : input.kind === "heatmap" && input.layout === "calendar"
+                  ? input.label
+                  : undefined) ??
             t.value,
           value,
           input.kind === "heatmap" && input.layout === "calendar"
@@ -728,11 +1027,41 @@ export function chartRows(
         cell(field.key, t[field.key], value, `${fieldFormat(value)}${field.key === "min" || field.key === "max" ? unit : ""}`);
       }
     }
-    const row = { key: chartMarkKey(datum), cells, values };
+    const row = { key: chartMarkKey(datum), cells, values, ...(tooltip ? { tooltip } : {}) };
     rows.push(row);
     return row;
   };
-  return { add, columns: () => [...columns.values()], table: (): ChartTable => ({ columns: [...columns.values()], rows }) };
+  return {
+    add,
+    columns: () => [...columns.values()],
+    table: (): ChartTable => {
+      if (input.kind === "bar" && input.layout === "rows" && input.limit !== undefined) {
+        const source = { ...input, limit: undefined };
+        const all = chartRows(source, locale, options);
+        const layout = rankedBarLayout({ data: source.data, title: source.title, subtitle: source.subtitle, valueFormat, locale });
+        for (const row of layout.rows) {
+          const value = Number.isFinite(row.value) ? row.value : null;
+          all.add({
+            role: "item",
+            index: row.index,
+            label: row.label,
+            anchor: [0, row.y],
+            values: [
+              { key: "value", value: value ?? "–", formatted: value === null ? "–" : valueFormat(value) },
+              {
+                key: "percent",
+                value: row.share === null ? "–" : row.share * 100,
+                formatted: row.share === null ? "–" : percent.format(row.share),
+              },
+              { key: "rank", value: row.rank },
+            ],
+          });
+        }
+        return all.table();
+      }
+      return { columns: [...columns.values()], rows };
+    },
+  };
 }
 
 /** The data behind every mark of the chart as a table: the accessible alternative and what Copy data copies. */
@@ -745,11 +1074,21 @@ export function chartTable(input: ChartInput, locale: string): ChartTable {
 /** Input values count against the budget, including observations summarized into boxes or bins. */
 export const chartMarks = (input: ChartInput): number => {
   switch (input.kind) {
+    case "pareto":
+      return input.data.length * 3;
+    case "radar":
+      return input.axes.length * input.series.length;
+    case "waterfall":
+      return input.steps.length + 2;
     case "area":
       return input.series.reduce((sum, s) => sum + s.data.length, 0);
     case "line":
     case "scatter":
       return input.series.reduce((sum, series) => sum + series.data.length, 0);
+    case "bar":
+      return input.series ? (input.x?.length ?? 0) * (input.series.length + (input.compare ? 1 : 0)) : input.data.length;
+    case "hbar":
+      return input.rows.length * input.series.length;
     case "boxplot":
       return input.data.reduce((sum, box) => sum + box.values.length, 0);
     case "gauge":

package/src/markdown/lib/chart-blocks.ts

@@ -1,6 +1,7 @@
 import { highlight, text } from "@k2b/stdlib";
 import { prepareChartSnapshot } from "@k2b/ui";
-import { barChartLayout } from "@k2b/ui/charts";
+import { barChartLayout, hbarLayout } from "@k2b/ui/charts";
+import { paretoLayout } from "@k2b/ui/charts/core";
 import { Lexer, type Tokens } from "marked";
 import type { z } from "zod";
 import {
@@ -457,8 +458,13 @@ export const chartBlockFrame = (body: string[], options: Pick<MarkdownChartOptio
  */
 export const notebookChartHeight = (input: ChartInput, locale: string): number | undefined => {
   const options = chartRenderOptions(input, locale, { legend: "outside" });
+  if (options.kind === "treemap") return 280;
+  if (options.kind === "pareto") return paretoLayout(options).height;
+
+  if (options.kind === "bubble" || options.kind === "radar") return 280;
+  if (options.kind === "hbar") return hbarLayout(options).height;
   if (options.kind === "heatmap" && options.layout === "calendar") return 280;
-  if (options.kind === "area") return 280;
+  if (options.kind === "waterfall" || options.kind === "area") return 280;
   if (options.kind !== "bar") return undefined;
   const layout = barChartLayout(options);
   return layout.layout === "rows" ? layout.height : undefined;