@k2b/ui 0.50.0 → 0.52.0

package/dist/ssr/content/ThumbnailStrip.js

@@ -0,0 +1,103 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<nav class=\"", "\"", "><ul data-scroll-fade-mode=\"both\" data-scroll-fade-axis=\"horizontal\">", "", "</ul></nav>"],
+  _tmpl$2 = "<span class=\"k2b-thumbnail-strip__dirty\" aria-hidden=\"true\"></span>",
+  _tmpl$3 = ["<li><button type=\"button\" class=\"k2b-thumbnail-strip__thumb\"", " aria-label=\"", "\"", ">", "", "</button></li>"],
+  _tmpl$4 = ["<img", " alt loading=\"lazy\" decoding=\"async\" draggable=\"false\">"],
+  _tmpl$5 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$6 = ["<li>", "</li>"];
+import { createEffect, For, on, Show } from "solid-js";
+import { IconButton } from "../actions/Button";
+import { createScrollFade } from "../layout/scroll-fade";
+import { useThumbnailStripMessages } from "./thumbnail-strip-messages";
+
+/** One image in a `ThumbnailStrip`. */
+
+/** Room an item keeps from a fading edge when keyboard focus scrolls it into view. */
+const EDGE = 48;
+
+/**
+ * A row of image thumbnails, 44 px high, that scrolls sideways and fades softly only on the side where more images
+ * follow. The current image is ringed and is the strip's one tab stop; the arrow keys, Home, and End move focus between
+ * images, and Enter or a click shows one. A dot marks unsaved edits. The host decides where the strip sits, also on a
+ * phone, and whether it floats over a picture.
+ */
+export function ThumbnailStrip(props) {
+  const messages = useThumbnailStripMessages();
+  let list;
+  createScrollFade(() => list, () => true);
+
+  // The current image scrolls into the middle whenever it or the list changes.
+  createEffect(on(() => [props.currentItem, props.items.length], () => queueMicrotask(() => {
+    const current = list?.querySelector('[aria-current="true"]');
+    if (!list || !current) return;
+    list.style.scrollBehavior = "auto";
+    list.scrollLeft = current.offsetLeft - (list.clientWidth - current.offsetWidth) / 2;
+    list.style.scrollBehavior = "";
+  })));
+
+  // A native listener, so a host that handles arrow keys itself, such as a lightbox, does not also see them.
+  const keys = event => {
+    // The "+" tile takes part in the arrow keys, so the keyboard reaches it without a tab stop of its own.
+    const thumbs = [...(list?.querySelectorAll(".k2b-thumbnail-strip__thumb, .k2b-thumbnail-strip__add") ?? [])];
+    const at = thumbs.findIndex(thumb => thumb === document.activeElement);
+    if (at < 0 || !list) return;
+    const to = {
+      ArrowRight: Math.min(thumbs.length - 1, at + 1),
+      ArrowLeft: Math.max(0, at - 1),
+      Home: 0,
+      End: thumbs.length - 1
+    }[event.key];
+    if (to === undefined) return;
+    event.preventDefault();
+    event.stopPropagation();
+    thumbs.forEach((thumb, index) => {
+      thumb.tabIndex = index === to ? 0 : -1;
+    });
+    const target = thumbs[to];
+    if (!target) return;
+    target.focus({
+      preventScroll: true
+    });
+    if (target.offsetLeft < list.scrollLeft + EDGE) list.scrollLeft = target.offsetLeft - EDGE;else if (target.offsetLeft + target.offsetWidth > list.scrollLeft + list.clientWidth - EDGE) list.scrollLeft = target.offsetLeft + target.offsetWidth - list.clientWidth + EDGE;
+  };
+  return _$ssr(_tmpl$, `k2b-thumbnail-strip ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return props.items;
+    },
+    children: item => {
+      const current = () => item.id === props.currentItem;
+      return _$ssr(_tmpl$3, _$ssrAttribute("aria-current", _$escape(current(), true), false) + _$ssrAttribute("tabindex", current() ? 0 : -1, false), `${_$escape(item.name, true)}${current() ? `, ${_$escape(messages().thumbnailCurrent, true)}` : ""}${item.dirty ? `, ${_$escape(messages().thumbnailUnsaved, true)}` : ""}`, _$ssrAttribute("title", _$escape(item.name, true), false), (() => {
+        const thumbnail = item.thumbnail;
+        if (typeof thumbnail === "function") return thumbnail();
+        return thumbnail ? _$ssr(_tmpl$4, _$ssrAttribute("src", _$escape(thumbnail, true), false)) : _$escape(null);
+      })(), _$escape(_$createComponent(Show, {
+        get when() {
+          return item.dirty;
+        },
+        get children() {
+          return _$ssr(_tmpl$2);
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.onAddItems;
+    },
+    children: add => _$ssr(_tmpl$6, _$escape(_$createComponent(IconButton, {
+      "class": "k2b-thumbnail-strip__add",
+      size: "sm",
+      tabindex: "-1",
+      get label() {
+        return messages().thumbnailAdd;
+      },
+      onClick: () => add()(),
+      get children() {
+        return _$ssr(_tmpl$5);
+      }
+    })))
+  })));
+}
+//# sourceMappingURL=ThumbnailStrip.js.map

package/dist/ssr/content/ThumbnailStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/ThumbnailStrip.tsx"],"sourcesContent":["import { createEffect, For, type JSX, on, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { createScrollFade } from \"../layout/scroll-fade\";\nimport { useThumbnailStripMessages } from \"./thumbnail-strip-messages\";\n\n/** One image in a `ThumbnailStrip`. */\nexport type ThumbnailStripItem = {\n  id: string;\n  name: string;\n  /** Small image URL, or a component that renders the caller's own thumbnail; a neutral tile shows until it loads. */\n  thumbnail?: string | (() => JSX.Element);\n  /** Marks an image with unsaved edits. */\n  dirty?: boolean;\n};\n\nexport type ThumbnailStripProps = {\n  items: readonly ThumbnailStripItem[];\n  /** The `id` of the shown image; it is ringed, scrolled into view, and the strip's one tab stop. */\n  currentItem?: string;\n  onSelectItem: (id: string) => void;\n  /** Adds a \"+\" tile at the end. */\n  onAddItems?: () => void;\n  /** Accessible name of the strip, such as \"Images\". */\n  label: string;\n  /** The host's layer class, such as `k2b-overlay-surface` where the strip floats over a picture. */\n  class?: string;\n};\n\n/** Room an item keeps from a fading edge when keyboard focus scrolls it into view. */\nconst EDGE = 48;\n\n/**\n * A row of image thumbnails, 44 px high, that scrolls sideways and fades softly only on the side where more images\n * follow. The current image is ringed and is the strip's one tab stop; the arrow keys, Home, and End move focus between\n * images, and Enter or a click shows one. A dot marks unsaved edits. The host decides where the strip sits, also on a\n * phone, and whether it floats over a picture.\n */\nexport function ThumbnailStrip(props: ThumbnailStripProps): JSX.Element {\n  const messages = useThumbnailStripMessages();\n  let list: HTMLUListElement | undefined;\n  createScrollFade(\n    () => list,\n    () => true,\n  );\n\n  // The current image scrolls into the middle whenever it or the list changes.\n  createEffect(\n    on(\n      () => [props.currentItem, props.items.length] as const,\n      () =>\n        queueMicrotask(() => {\n          const current = list?.querySelector<HTMLElement>('[aria-current=\"true\"]');\n          if (!list || !current) return;\n          list.style.scrollBehavior = \"auto\";\n          list.scrollLeft = current.offsetLeft - (list.clientWidth - current.offsetWidth) / 2;\n          list.style.scrollBehavior = \"\";\n        }),\n    ),\n  );\n\n  // A native listener, so a host that handles arrow keys itself, such as a lightbox, does not also see them.\n  const keys = (event: KeyboardEvent) => {\n    // The \"+\" tile takes part in the arrow keys, so the keyboard reaches it without a tab stop of its own.\n    const thumbs = [...(list?.querySelectorAll<HTMLButtonElement>(\".k2b-thumbnail-strip__thumb, .k2b-thumbnail-strip__add\") ?? [])];\n    const at = thumbs.findIndex((thumb) => thumb === document.activeElement);\n    if (at < 0 || !list) return;\n    const to = { ArrowRight: Math.min(thumbs.length - 1, at + 1), ArrowLeft: Math.max(0, at - 1), Home: 0, End: thumbs.length - 1 }[\n      event.key\n    ];\n    if (to === undefined) return;\n    event.preventDefault();\n    event.stopPropagation();\n    thumbs.forEach((thumb, index) => {\n      thumb.tabIndex = index === to ? 0 : -1;\n    });\n    const target = thumbs[to];\n    if (!target) return;\n    target.focus({ preventScroll: true });\n    if (target.offsetLeft < list.scrollLeft + EDGE) list.scrollLeft = target.offsetLeft - EDGE;\n    else if (target.offsetLeft + target.offsetWidth > list.scrollLeft + list.clientWidth - EDGE)\n      list.scrollLeft = target.offsetLeft + target.offsetWidth - list.clientWidth + EDGE;\n  };\n\n  return (\n    <nav class={`k2b-thumbnail-strip ${props.class ?? \"\"}`} aria-label={props.label}>\n      <ul ref={list} data-scroll-fade-mode=\"both\" data-scroll-fade-axis=\"horizontal\" on:keydown={keys}>\n        <For each={props.items}>\n          {(item) => {\n            const current = () => item.id === props.currentItem;\n            return (\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"k2b-thumbnail-strip__thumb\"\n                  aria-current={current()}\n                  tabindex={current() ? 0 : -1}\n                  aria-label={`${item.name}${current() ? `, ${messages().thumbnailCurrent}` : \"\"}${item.dirty ? `, ${messages().thumbnailUnsaved}` : \"\"}`}\n                  title={item.name}\n                  onClick={() => {\n                    if (!current()) props.onSelectItem(item.id);\n                  }}\n                >\n                  {(() => {\n                    const thumbnail = item.thumbnail;\n                    if (typeof thumbnail === \"function\") return thumbnail();\n                    return thumbnail ? <img src={thumbnail} alt=\"\" loading=\"lazy\" decoding=\"async\" draggable={false} /> : null;\n                  })()}\n                  <Show when={item.dirty}>\n                    <span class=\"k2b-thumbnail-strip__dirty\" aria-hidden=\"true\" />\n                  </Show>\n                </button>\n              </li>\n            );\n          }}\n        </For>\n        <Show when={props.onAddItems}>\n          {(add) => (\n            <li>\n              <IconButton class=\"k2b-thumbnail-strip__add\" size=\"sm\" tabindex=\"-1\" label={messages().thumbnailAdd} onClick={() => add()()}>\n                <i class=\"ti ti-plus\" aria-hidden=\"true\" />\n              </IconButton>\n            </li>\n          )}\n        </Show>\n      </ul>\n    </nav>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/content/chart-bar.js

@@ -1,4 +1,6 @@
-import { chartDatumSvg, computeDomain, escapeXml, extendDomainToNice, MAX_AXIS_TICKS, mapLog, mapRange, niceLogTicks, niceStep, referenceLineAttributes, svgRoot } from "../charts/core/svg";
+import { barPercent } from "../charts/core/bar-labels";
+import { chartDatumSvg, computeDomain, escapeXml, extendDomainToNice, MAX_AXIS_TICKS, mapLog, mapRange, niceLogTicks, niceStep, referenceLineAttributes, svgRoot } from "../charts/core/svg-renderers";
+import { chartMessages } from "./chart-message-catalog";
 
 /**
  * Bar chart options: stdlib's `charts.bar` options plus a title for the category axis and a separate value format.
@@ -38,7 +40,7 @@ export const chartTextWidth = (text, size = FONT_PX) => {
 };
 
 /** Split a label into at most `lines` lines of `maxPx`; the last line ends with an ellipsis when the label is longer. */
-const wrapLabel = (label, maxPx, lines) => {
+export const wrapLabel = (label, maxPx, lines) => {
   const words = label.trim().split(/\s+/);
   const result = [];
   let current = "";
@@ -128,7 +130,7 @@ const finiteItems = data => data.flatMap((item, index) => Number.isFinite(item.v
   item,
   index
 }] : []);
-const headerHeight = opts => opts.title || opts.subtitle ? (opts.title ? 14 : 0) + (opts.subtitle ? 6 : 0) + 16 : 0;
+export const headerHeight = opts => opts.title || opts.subtitle ? (opts.title ? 14 : 0) + (opts.subtitle ? 6 : 0) + 16 : 0;
 const valueFormat = opts => opts.valueFormat ?? opts.yAxis?.format ?? (value => String(value));
 const tickFormat = opts => opts.yAxis?.format ?? (value => String(value));
 
@@ -146,7 +148,22 @@ const columnsFit = (opts, finite, width) => {
 
 /** The renderer's plan for a chart: its layout and logical height at `width`, derived from the data alone. */
 const barChartPlan = (opts, width = 480) => {
-  const finite = finiteItems(opts.data);
+  const finite = finiteItems(opts.data ?? []);
+  if (opts.layout === "rows" && !opts.series) return {
+    layout: "rows",
+    height: rankedBarLayout(opts, {
+      width,
+      height: 280
+    }).height,
+    finite,
+    header: headerHeight(opts)
+  };
+  if (opts.series) return {
+    layout: "columns",
+    height: 280,
+    finite,
+    header: headerHeight(opts)
+  };
   const header = headerHeight(opts);
   if (!finite.length) return {
     layout: "columns",
@@ -154,7 +171,7 @@ const barChartPlan = (opts, width = 480) => {
     finite,
     header
   };
-  if (opts.xAxis?.ordered || columnsFit(opts, finite, width)) return {
+  if (opts.layout === "columns" || opts.layout !== "rows" && (opts.xAxis?.ordered || columnsFit(opts, finite, width))) return {
     layout: "columns",
     height: 280,
     finite,
@@ -296,7 +313,7 @@ const colorIndex = (item, fallback) => {
   if (!Number.isInteger(index) || index < 0) throw new RangeError("Chart colorIndex must be a nonnegative integer");
   return index % 8;
 };
-const renderHeader = (opts, width) => {
+export const renderHeader = (opts, width) => {
   const parts = [];
   let y = 16;
   if (opts.title) {
@@ -350,22 +367,15 @@ const renderColumns = (opts, plan, width, height, inspect) => {
   const labelY = g.y1;
   // Unordered columns fit every label (see columnsFit); ordered ones label every n-th column that leaves room, from
   // the first column whose label stays inside the drawing.
-  const labelPx = Math.max(...finite.map(({
+  const visibleLabels = visibleCategoryLabels(finite.map(({
     item
-  }) => chartTextWidth(item.label))) + GAP_PX;
-  const labelStep = Math.max(1, Math.ceil(labelPx / (slot / units)));
-  const inside = position => {
-    const half = chartTextWidth(finite[position].item.label) / 2 * units;
-    const center = g.x0 + slot * (position + 0.5);
-    return center - half >= 0 && center + half <= width;
-  };
-  const firstLabel = Math.max(0, finite.findIndex((_, position) => inside(position)));
+  }) => item.label), g.x0, slot, width, units);
   finite.forEach(({
     item,
     index
   }, position) => {
     const center = g.x0 + slot * (position + 0.5);
-    if (position >= firstLabel && (position - firstLabel) % labelStep === 0 && inside(position)) parts.push(`<text class="stdlib-chart-tick-label stdlib-chart-category-label" x="${fmt(center)}" y="${fmt(labelY)}" dy="16" text-anchor="middle">${escapeXml(item.label)}</text>`);
+    if (visibleLabels.has(position)) parts.push(`<text class="stdlib-chart-tick-label stdlib-chart-category-label" x="${fmt(center)}" y="${fmt(labelY)}" dy="16" text-anchor="middle">${escapeXml(item.label)}</text>`);
     if (g.scale.log && item.value <= 0) return;
     const valueY = y(item.value);
     const top = Math.min(valueY, baseline);
@@ -459,6 +469,8 @@ const renderRows = (opts, plan, width, inspect) => {
  * drawing instead of dropping labels: use {@link barChartLayout} for its logical height.
  */
 export const renderBarChartSvg = opts => {
+  if (opts.series) return renderSeriesBars(opts);
+  if (opts.layout === "rows") return renderRankedBars(opts);
   const plan = barChartPlan(opts, opts.width);
   // The empty drawing of stdlib's bar chart, written here so bundles leave out stdlib's whole bar renderer.
   if (!plan.finite.length) return svgRoot({
@@ -473,4 +485,320 @@ export const renderBarChartSvg = opts => {
     className: opts.className
   }, body).replace("<svg ", `<svg data-bar-layout="${plan.layout}" `);
 };
+
+/** Stable wrapping legend slots reserve the widest total or category value before interaction. */
+export function barSeriesLegend(entries, format, width = 480, displayWidth = 296, maxHeight = Infinity) {
+  const unit = width / displayWidth;
+  let x = 0,
+    row = 0;
+  const items = entries.map(entry => {
+    const finite = entry.data.filter(v => v !== null && Number.isFinite(v));
+    const total = finite.length ? finite.reduce((sum, v) => sum + v, 0) : null;
+    const valueWidth = Math.max(chartTextWidth(total === null ? "–" : format(total)), ...entry.data.filter(v => v !== null && Number.isFinite(v)).map(v => chartTextWidth(format(v))));
+    const labelWidth = Math.max(8, Math.min(96, displayWidth - valueWidth - 32, chartTextWidth(entry.label)));
+    const slot = Math.min(width, (14 + labelWidth + 6 + valueWidth + 16) * unit);
+    if (x && x + slot > width) {
+      x = 0;
+      row++;
+    }
+    const item = {
+      ...entry,
+      total,
+      x,
+      y: row * 20 + 12,
+      labelWidth,
+      valueX: x + slot - 16 * unit
+    };
+    x += slot;
+    return item;
+  });
+  const rows = Math.max(1, Math.floor(maxHeight / 20));
+  const overflow = row + 1 > rows;
+  const visible = overflow ? items.filter(item => item.y <= (rows - 1) * 20) : items;
+  return {
+    items: visible,
+    hidden: items.length - visible.length,
+    height: entries.length ? Math.min(row + 1, rows) * 20 : 0
+  };
+}
+
+/** Category geometry shared by SVG, server snapshots and browser inspection. */
+export function seriesBarLayout(opts, size = {
+  width: 480,
+  height: 280
+}) {
+  const categories = opts.x ?? [];
+  const series = opts.series ?? [];
+  if (series.some(s => s.data.length !== categories.length) || opts.compare && opts.compare.data.length !== categories.length) throw new RangeError("Bar series must have the same length as x");
+  if (opts.compare && series.length !== 1) throw new RangeError("Bar comparison needs exactly one current series");
+  if (opts.normalize && opts.layout !== "stacked") throw new RangeError("Normalized bars must be stacked");
+  if (opts.layout === "stacked" && opts.yAxis?.scale === "log") throw new RangeError("Stacked bars need a linear axis");
+  if (opts.layout === "stacked" && series.some(s => s.data.some(v => v !== null && v < 0))) throw new RangeError("Stacked bars require nonnegative values");
+  const totals = categories.map((_, i) => series.some(s => Number.isFinite(s.data[i])) ? series.reduce((sum, s) => sum + (Number.isFinite(s.data[i]) ? s.data[i] : 0), 0) : null);
+  const values = opts.layout === "stacked" ? totals.filter(v => v !== null) : series.flatMap(s => s.data.filter(v => v !== null));
+  const scale = valueScale(opts.normalize ? [0, 1] : [...values, ...(opts.compare?.data.filter(v => v !== null) ?? [])], opts.yAxis, true);
+  const format = valueFormat(opts);
+  const units = size.width / narrow(opts);
+  const legend = opts.legend !== false;
+  // Keep the legend within one quarter of the frame, leaving room for the plot.
+  const entries = [...series, ...(opts.compare ? [opts.compare] : [])];
+  const legendLayout = barSeriesLegend(entries, format, size.width, narrow(opts), size.height * 0.25);
+  const top = headerHeight(opts) + 8 + (legend ? legendLayout.height : 0) + (opts.yAxis?.label ? 16 : 0);
+  const left = Math.max(40, ...scale.ticks.map(v => (chartTextWidth(opts.normalize ? `${Math.round(v * 100)}%` : tickFormat(opts)(v)) + 8) * units));
+  const right = size.width - 4;
+  const bottom = size.height - 24 - (opts.xAxis?.label ? 18 : 0);
+  const slot = (right - left) / Math.max(1, categories.length);
+  const y = value => project(scale, value, [bottom, top]);
+  const columns = categories.map((label, index) => {
+    const center = left + slot * (index + 0.5);
+    let acc = 0;
+    const current = series.map((s, seriesIndex) => {
+      const raw = s.data[index];
+      const value = raw === null || !Number.isFinite(raw) || opts.normalize && totals[index] === 0 ? null : opts.normalize ? raw / totals[index] : raw;
+      const base = opts.layout === "stacked" ? acc : 0;
+      if (value !== null && opts.layout === "stacked") acc += value;
+      return {
+        seriesIndex,
+        raw,
+        value,
+        base
+      };
+    });
+    return {
+      label,
+      index,
+      center,
+      current,
+      total: totals[index],
+      previous: opts.compare?.data[index]
+    };
+  });
+  const barWidthPx = (opts.compare ? Math.min(slot * 0.32, 26) : Math.min(slot * (opts.layout === "stacked" ? 0.56 : 0.8 / Math.max(1, entries.length)), opts.layout === "stacked" ? 40 : 22)) / units;
+  return {
+    ...size,
+    columns,
+    totals,
+    scale,
+    left,
+    right,
+    top,
+    bottom,
+    slot,
+    y,
+    format,
+    units,
+    entries,
+    legend,
+    legendLayout,
+    barWidthPx
+  };
+}
+const renderSeriesBars = opts => {
+  const g = seriesBarLayout(opts, opts);
+  const parts = [renderHeader(opts, opts.width)];
+  const labels = chartMessages.resolve([opts.locale ?? "en"]).t;
+  const change = new Intl.NumberFormat(opts.locale ?? "en", {
+    style: "percent",
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero"
+  });
+  const text = (x, y, value, cls = "stdlib-chart-tick-label", anchor = "start", extra = "") => `<text class="${cls}" x="${fmt(x)}" y="${fmt(y)}" text-anchor="${anchor}" ${extra}>${escapeXml(value)}</text>`;
+  if (g.legend) g.legendLayout.items.forEach((entry, i) => {
+    const y = headerHeight(opts) + entry.y;
+    const x = entry.x;
+    parts.push(`<rect class="stdlib-chart-series-${i < (opts.series?.length ?? 0) ? i % 8 : 0}" x="${x}" y="${y - 8}" width="${8 * g.units}" height="8" ${i >= (opts.series?.length ?? 0) ? 'style="fill:none;stroke:var(--stdlib-chart-c1);"' : ""}/>`);
+    if (i >= (opts.series?.length ?? 0)) parts.push(`<path d="M ${x} ${y - 4} l ${4 * g.units} -4 M ${x + 2 * g.units} ${y} l ${6 * g.units} -6 M ${x + 6 * g.units} ${y} l ${2 * g.units} -2" fill="none" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1"/>`);
+    const label = wrapLabel(entry.label, Math.max(8, entry.labelWidth), 1).lines[0] ?? entry.label;
+    const value = escapeXml(entry.total === null ? "–" : g.format(entry.total));
+    // One text run keeps the value six CSS pixels after its label even when the SVG stretches.
+    parts.push(`<text x="${fmt(x + 14 * g.units)}" y="${fmt(y)}"><tspan class="stdlib-chart-tick-label">${escapeXml(label)}</tspan><tspan class="stdlib-chart-bar-value" dx="6" data-chart-legend-value data-field="${i < (opts.series?.length ?? 0) ? `series:${i}` : "previous"}" data-default="${value}">${value}</tspan></text>`);
+  });
+  if (g.legend && g.legendLayout.hidden) parts.push(text(0, headerHeight(opts) + g.legendLayout.height - 8, `+${g.legendLayout.hidden}`, "stdlib-chart-tick-label"));
+  if (opts.yAxis?.label) parts.push(text(0, g.top - 6, opts.yAxis.label, "stdlib-chart-axis-label"));
+  for (const tick of g.scale.ticks) {
+    parts.push(`<line class="stdlib-chart-grid" x1="${g.left}" x2="${g.right}" y1="${g.y(tick)}" y2="${g.y(tick)}"/>`);
+    parts.push(text(g.left - 6 * g.units, g.y(tick) + 4, opts.normalize ? `${Math.round(tick * 100)}%` : tickFormat(opts)(tick), undefined, "end"));
+  }
+  parts.push(`<line class="stdlib-chart-axis" x1="${g.left}" x2="${g.right}" y1="${g.bottom}" y2="${g.bottom}"/>`);
+  const visibleLabels = visibleCategoryLabels(g.columns.map(c => c.label), g.left, g.slot, opts.width, g.units);
+  for (const column of g.columns) {
+    const fields = column.current.map((v, i) => ({
+      key: `series:${i}`,
+      value: v.raw === null || !Number.isFinite(v.raw) ? "–" : v.raw,
+      formatted: v.raw === null || !Number.isFinite(v.raw) ? "–" : g.format(v.raw)
+    }));
+    if (opts.compare) {
+      const previous = column.previous;
+      fields.push({
+        key: "previous",
+        value: previous ?? "–",
+        formatted: previous === null || !Number.isFinite(previous) ? "–" : g.format(previous)
+      });
+      const current = column.current[0]?.raw;
+      const delta = current == null || previous == null || !Number.isFinite(current) || !Number.isFinite(previous) ? null : current - previous;
+      fields.push({
+        key: "delta",
+        value: delta ?? "–",
+        formatted: delta === null || previous === 0 ? "–" : change.format(delta / Math.abs(previous))
+      });
+    } else if (opts.layout === "stacked") {
+      fields.reverse();
+      fields.push({
+        key: "total",
+        value: column.total ?? "–",
+        formatted: column.total === null ? "–" : g.format(column.total)
+      });
+    }
+    let marks = `<rect class="k2b-chart-category-band" fill="none" pointer-events="all" x="${column.center - g.slot / 2}" y="${g.top}" width="${g.slot}" height="${Math.max(0, g.bottom - g.top)}" rx="6"/>`;
+    const bar = (value, base, x, width, color, previous = false) => {
+      const y0 = g.y(g.scale.log ? g.scale.domain[0] : base),
+        y1 = g.y(base + value);
+      const rect = `<rect class="stdlib-chart-bar stdlib-chart-series-${color % 8}" x="${fmt(x)}" y="${fmt(Math.min(y0, y1))}" width="${fmt(Math.max(0, width))}" height="${fmt(Math.abs(y0 - y1))}" rx="3"/>`;
+      if (!previous) return rect;
+      // Inline strokes avoid document-global SVG pattern IDs, including duplicate charts during SSR.
+      const lines = [];
+      for (let d = -Math.abs(y0 - y1); d < width; d += 6) {
+        const lo = Math.max(0, -d),
+          hi = Math.min(Math.abs(y0 - y1), width - d);
+        if (hi > lo) lines.push(`<line x1="${x + d + lo}" y1="${Math.max(y0, y1) - lo}" x2="${x + d + hi}" y2="${Math.max(y0, y1) - hi}" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1.5"/>`);
+      }
+      return `<g class="k2b-chart-previous">${rect.replace("/>", ' style="fill:var(--stdlib-chart-c1,#3b82f6);fill-opacity:.14" stroke="var(--stdlib-chart-c1,#3b82f6)" stroke-width="1"/>')}${lines.join("")}</g>`;
+    };
+    if (opts.compare) {
+      const bw = Math.min(g.slot * 0.32, 26);
+      const gap = Math.min(1.5, g.slot * 0.08);
+      if (column.previous !== null && Number.isFinite(column.previous) && (!g.scale.log || column.previous > 0)) marks += bar(column.previous, 0, column.center - bw - gap, bw, 0, true);
+      const value = column.current[0]?.value;
+      if (value != null && (!g.scale.log || value > 0)) marks += bar(value, 0, column.center + gap, bw, 0);
+    } else column.current.forEach(v => {
+      if (v.value === null || g.scale.log && v.value <= 0) return;
+      const stacked = opts.layout === "stacked";
+      const bw = stacked ? Math.min(g.slot * 0.56, 40) : Math.min(g.slot * 0.8 / g.entries.length, 22);
+      const gap = bw / g.units > 4 ? 2 : 0;
+      const x = stacked ? column.center - bw / 2 : column.center - g.entries.length * bw / 2 + v.seriesIndex * bw + gap / 2;
+      const segment = bar(v.value, v.base, x, stacked ? bw : bw - gap, v.seriesIndex);
+      if (stacked && v.value > 0 && column.current.some(next => next.seriesIndex > v.seriesIndex && next.value !== null && next.value > 0)) {
+        const fullHeight = Math.abs(g.y(v.base) - g.y(v.base + v.value));
+        const gap = Math.min(1.5, fullHeight / 2);
+        marks += segment.replace(/y="[^"]*"/, `y="${g.y(v.base + v.value) + gap}"`).replace(/height="[^"]*"/, `height="${fullHeight - gap}"`);
+      } else marks += segment;
+    });
+    parts.push(chartDatumSvg(marks, {
+      role: "item",
+      index: column.index,
+      label: column.label,
+      anchor: [column.center, g.top],
+      values: fields
+    }, opts.inspect ?? false, [column.label, ...fields.map(field => `${field.key.startsWith("series:") ? opts.series[Number(field.key.slice(7))].label : field.key === "previous" ? opts.compare.label : field.key === "delta" ? labels.chartFields({
+      key: "delta"
+    }) : labels.chartFields({
+      key: "total"
+    })}: ${field.formatted}`)].join(" · ")));
+    if (visibleLabels.has(column.index)) parts.push(text(column.center, g.bottom, column.label, "stdlib-chart-tick-label stdlib-chart-category-label", "middle", 'dy="16"'));
+  }
+  for (const ref of opts.references ?? []) if ((ref.axis ?? "y") === "y" && Number.isFinite(ref.value) && ref.value >= g.scale.domain[0] && ref.value <= g.scale.domain[1]) {
+    parts.push(`<line class="stdlib-chart-reference" x1="${g.left}" x2="${g.right}" y1="${g.y(ref.value)}" y2="${g.y(ref.value)}"/>`);
+    if (ref.label) parts.push(text(g.right, g.y(ref.value) - 4, ref.label, "stdlib-chart-reference-label", "end"));
+  }
+  if (opts.xAxis?.label) parts.push(text((g.left + g.right) / 2, opts.height - 2, opts.xAxis.label, "stdlib-chart-axis-label", "middle"));
+  return svgRoot(opts, parts.join("")).replace("<svg ", '<svg data-bar-layout="columns" ');
+};
+const visibleCategoryLabels = (labels, left, slot, width, units) => {
+  const labelPx = Math.max(0, ...labels.map(label => chartTextWidth(label))) + GAP_PX;
+  const step = Math.max(1, Math.ceil(labelPx / (slot / units)));
+  const inside = i => {
+    const half = chartTextWidth(labels[i]) * units / 2,
+      center = left + slot * (i + 0.5);
+    return center - half >= 0 && center + half <= width;
+  };
+  const first = Math.max(0, labels.findIndex((_, i) => inside(i)));
+  return new Set(labels.flatMap((_, i) => i >= first && (i - first) % step === 0 && inside(i) ? [i] : []));
+};
+
+/** Ranked rows retain original indices. A limit changes the drawing, never the denominator or source data. */
+export function rankedBarLayout(opts, size = {
+  width: 480,
+  height: 280
+}) {
+  if (opts.limit !== undefined && (!Number.isInteger(opts.limit) || opts.limit < 1)) throw new RangeError("Bar list limit must be a positive integer");
+  if (opts.data?.some(d => Number.isFinite(d.value) && d.value < 0)) throw new RangeError("Ranked bar lists require nonnegative values");
+  const sorted = (opts.data ?? []).map((item, index) => ({
+    ...item,
+    index
+  })).sort((a, b) => (Number.isFinite(b.value) ? b.value : -Infinity) - (Number.isFinite(a.value) ? a.value : -Infinity));
+  const total = sorted.reduce((sum, d) => sum + (Number.isFinite(d.value) ? d.value : 0), 0);
+  const shown = sorted.slice(0, opts.limit),
+    rest = sorted.slice(shown.length);
+  const top = headerHeight(opts),
+    unit = size.width / narrow(opts),
+    format = opts.valueFormat ?? opts.yAxis?.format ?? (v => new Intl.NumberFormat(opts.locale ?? "en").format(v)),
+    percent = barPercent(opts.locale);
+  const shareWidth = opts.share ? 48 * unit : 0;
+  const valueWidth = Math.max(20, ...shown.map(d => chartTextWidth(Number.isFinite(d.value) ? format(d.value) : "–"))) * unit;
+  const labelWidth = Math.max(8, (size.width - shareWidth - valueWidth - 36 * unit) / unit);
+  const max = Math.max(0, ...sorted.map(d => Number.isFinite(d.value) ? d.value : 0));
+  const rows = shown.map((d, rank) => ({
+    ...d,
+    rank: rank + 1,
+    y: top + rank * 36,
+    width: Number.isFinite(d.value) && max > 0 ? d.value / max * size.width : 0,
+    share: Number.isFinite(d.value) && total > 0 ? d.value / total : null
+  }));
+  return {
+    ...size,
+    height: Math.max(size.height, top + rows.length * 36 + (rest.length ? 24 : 0)),
+    rows,
+    total,
+    rest,
+    restValue: rest.some(d => Number.isFinite(d.value)) ? rest.reduce((sum, d) => sum + (Number.isFinite(d.value) ? d.value : 0), 0) : null,
+    top,
+    unit,
+    format,
+    percent,
+    shareWidth,
+    labelWidth
+  };
+}
+const renderRankedBars = opts => {
+  const g = rankedBarLayout(opts, opts),
+    labels = chartMessages.resolve([opts.locale ?? "en"]).t;
+  const parts = [renderHeader(opts, opts.width)];
+  const color = opts.tone ? `var(--k2b-flow-${opts.tone}-mark,var(--stdlib-chart-c1,#3b82f6))` : "var(--stdlib-chart-c1,#3b82f6)";
+  const text = (x, y, value, anchor = "start", cls = "stdlib-chart-tick-label") => `<text class="${cls}" x="${x}" y="${y}" text-anchor="${anchor}">${escapeXml(value)}</text>`;
+  for (const row of g.rows) {
+    const value = Number.isFinite(row.value) ? row.value : null,
+      written = value === null ? "–" : g.format(value);
+    const share = row.share === null ? "–" : g.percent.format(row.share);
+    const label = wrapLabel(row.label, g.labelWidth * 11 / 13, 1).lines[0] ?? row.label;
+    const marks = `<rect class="k2b-chart-category-band" fill="none" pointer-events="all" x="0" y="${row.y}" width="${g.width}" height="32" rx="6"/><rect x="0" y="${row.y}" width="${row.width}" height="32" rx="6" style="fill:${color};fill-opacity:.16;pointer-events:none"/>${text(10 * g.unit, row.y + 20, label)}${text(g.width - 10 * g.unit - g.shareWidth, row.y + 20, written, "end", "stdlib-chart-bar-value")}${opts.share ? text(g.width - 10 * g.unit, row.y + 20, share, "end") : ""}`;
+    parts.push(chartDatumSvg(marks, {
+      role: "item",
+      index: row.index,
+      label: row.label,
+      anchor: [g.width / 2, row.y],
+      values: [{
+        key: "value",
+        value: value ?? "–",
+        formatted: written
+      }, {
+        key: "percent",
+        value: row.share === null ? "–" : row.share * 100,
+        formatted: share
+      }, {
+        key: "rank",
+        value: row.rank
+      }]
+    }, opts.inspect ?? false, `${row.label} · ${written} · ${share} · ${labels.chartFields({
+      key: "rank"
+    })}: ${row.rank}`));
+  }
+  if (g.rest.length) parts.push(text(10 * g.unit, g.top + g.rows.length * 36 + 16, `${labels.chartBarMore({
+    n: g.rest.length
+  })} · ${g.restValue === null ? "–" : g.format(g.restValue)}`));
+  return svgRoot({
+    ...opts,
+    height: g.height,
+    className: [opts.className, "k2b-chart-ranked"].filter(Boolean).join(" ")
+  }, parts.join("")).replace("</style>", ".k2b-chart-ranked :is(.stdlib-chart-tick-label,.stdlib-chart-bar-value){font-size:13px}</style>").replace("<svg ", '<svg data-bar-layout="rows" ');
+};
 //# sourceMappingURL=chart-bar.js.map