ggaction 0.0.13 → 0.0.16

package/src/layout/labels.js

@@ -19,6 +19,350 @@ const MAX_EXHAUSTIVE_OFFSET_STEPS = 28;
 const MAX_SEARCH_DISPLACEMENT = 1_000_000;
 const DISTANT_RING_COUNT = 16;
 const DISTANT_ANGLE_COUNT = 32;
+const PLACEMENT_OPTIONS = Object.freeze([
+  "anchor", "gap", "overflow", "leader"
+]);
+const PLACEMENT_LEADER_OPTIONS = Object.freeze(["stroke", "strokeWidth"]);
+const SEMANTIC_ANCHORS = new Set([
+  "center", "insideStart", "insideEnd", "outsideStart", "outsideEnd"
+]);
+const OVERFLOW_POLICIES = new Set(["hide", "outside", "allow"]);
+
+export const DEFAULT_MARK_LABEL_PLACEMENT = cloneAndFreeze({
+  gap: 4,
+  overflow: "hide",
+  leader: false
+});
+
+export function markLabelPlacementLeaderId(target) {
+  return `${target}-placement-leaders`;
+}
+
+function normalizePlacementLeader(value) {
+  if (value === undefined || value === false) return false;
+  validateOptionObject(value, PLACEMENT_LEADER_OPTIONS, "mark label placement leader");
+  const leader = { stroke: "#94a3b8", strokeWidth: 1, ...value };
+  if (typeof leader.stroke !== "string" || leader.stroke.length === 0) {
+    throw new TypeError("Mark label placement leader stroke must be a non-empty string.");
+  }
+  validateNonNegativeFinite(
+    leader.strokeWidth,
+    "Mark label placement leader strokeWidth"
+  );
+  return leader;
+}
+
+export function normalizeMarkLabelPlacement(value) {
+  validateOptionObject(value, PLACEMENT_OPTIONS, "mark label placement", {
+    allowEmpty: false,
+    emptyError: TypeError
+  });
+  if (!SEMANTIC_ANCHORS.has(value.anchor)) {
+    throw new Error(`Unsupported mark label anchor "${value.anchor}".`);
+  }
+  const gap = value.gap ?? DEFAULT_MARK_LABEL_PLACEMENT.gap;
+  const overflowPolicy = value.overflow ?? DEFAULT_MARK_LABEL_PLACEMENT.overflow;
+  validateNonNegativeFinite(gap, "Mark label placement gap");
+  if (!OVERFLOW_POLICIES.has(overflowPolicy)) {
+    throw new Error(`Unsupported mark label overflow "${overflowPolicy}".`);
+  }
+  return cloneAndFreeze({
+    anchor: value.anchor,
+    gap,
+    overflow: overflowPolicy,
+    leader: normalizePlacementLeader(value.leader)
+  });
+}
+
+function finitePoint(value, label) {
+  if (
+    !isPlainObject(value) ||
+    !Number.isFinite(value.x) ||
+    !Number.isFinite(value.y)
+  ) {
+    throw new TypeError(`${label} requires finite x and y.`);
+  }
+  return value;
+}
+
+function unitVector(value, label) {
+  finitePoint(value, label);
+  const length = Math.hypot(value.x, value.y);
+  if (!Number.isFinite(length) || length <= 0) {
+    throw new RangeError(`${label} requires a non-zero direction.`);
+  }
+  return { x: value.x / length, y: value.y / length };
+}
+
+function validateIntervalBounds(bounds) {
+  if (
+    !isPlainObject(bounds) ||
+    ![bounds.left, bounds.right, bounds.top, bounds.bottom].every(Number.isFinite) ||
+    bounds.right < bounds.left ||
+    bounds.bottom < bounds.top
+  ) {
+    throw new RangeError("Interval label placement requires ordered finite bounds.");
+  }
+}
+
+function validatePlacementGeometry(geometry, anchor) {
+  if (!isPlainObject(geometry)) {
+    throw new TypeError("Mark label placement requires source geometry.");
+  }
+  if (geometry.kind === "interval") {
+    finitePoint(geometry.center, "Interval label center");
+    for (const role of ["start", "end"]) {
+      finitePoint(geometry[role]?.point, `Interval label ${role}`);
+      unitVector(geometry[role]?.outward, `Interval label ${role}`);
+    }
+    validateIntervalBounds(geometry.bounds);
+    return;
+  }
+  if (geometry.kind === "arc") {
+    if (![geometry.centerX, geometry.centerY, geometry.startTheta,
+      geometry.endTheta, geometry.innerRadius, geometry.outerRadius]
+      .every(Number.isFinite)) {
+      throw new TypeError("Arc label placement requires finite sector geometry.");
+    }
+    if (
+      geometry.innerRadius < 0 ||
+      geometry.outerRadius <= geometry.innerRadius ||
+      geometry.startTheta === geometry.endTheta ||
+      Math.abs(geometry.endTheta - geometry.startTheta) > 360
+    ) {
+      throw new RangeError("Arc label placement requires an ordered annular sector.");
+    }
+    return;
+  }
+  if (geometry.kind === "point") {
+    finitePoint(geometry.center, "Point label center");
+    if (anchor === "outsideEnd") {
+      finitePoint(geometry.end?.point, "Polar Point label boundary");
+      unitVector(geometry.end?.outward, "Polar Point label direction");
+    }
+    return;
+  }
+  throw new Error(`Unsupported mark label placement geometry "${geometry.kind}".`);
+}
+
+export function assertMarkLabelPlacementSupport({ markType, coordinateType, intervalAxis }, placement) {
+  const anchor = placement.anchor;
+  if (markType === "bar" || markType === "arc") return placement;
+  if (markType === "rect") {
+    if (anchor === "center" || intervalAxis !== undefined) return placement;
+    throw new Error("Rect semantic label placement requires one explicit interval axis.");
+  }
+  if (markType === "point") {
+    if (anchor === "center" || (coordinateType === "polar" && anchor === "outsideEnd")) {
+      return placement;
+    }
+    throw new Error(
+      coordinateType === "polar"
+        ? `Polar Point does not support mark label anchor "${anchor}".`
+        : `Point does not support mark label anchor "${anchor}".`
+    );
+  }
+  if (markType === "line") {
+    throw new Error("Line labels retain the endpoint API and do not accept semantic placement objects.");
+  }
+  if (markType === "rule") {
+    throw new Error("Rule labels do not support semantic placement objects.");
+  }
+  throw new Error(`Mark type "${markType}" does not support semantic label placement.`);
+}
+
+function localTextBounds(text) {
+  return resolveTextBounds({ ...text, x: 0, y: 0 }, text.profile);
+}
+
+function projectionRange(bounds, direction) {
+  const values = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom }
+  ].map(point => point.x * direction.x + point.y * direction.y);
+  return { minimum: Math.min(...values), maximum: Math.max(...values) };
+}
+
+function boundaryCandidate(boundary, direction, gap, text) {
+  const resolvedDirection = unitVector(direction, "Mark label placement direction");
+  const support = projectionRange(localTextBounds(text), resolvedDirection);
+  const distance = gap - support.minimum;
+  return {
+    x: boundary.x + resolvedDirection.x * distance + (text.dx ?? 0),
+    y: boundary.y + resolvedDirection.y * distance + (text.dy ?? 0),
+    sourceX: boundary.x,
+    sourceY: boundary.y
+  };
+}
+
+function centerCandidate(center, text) {
+  return {
+    x: center.x + (text.dx ?? 0),
+    y: center.y + (text.dy ?? 0),
+    sourceX: center.x,
+    sourceY: center.y
+  };
+}
+
+function candidateBounds(candidate, text) {
+  return resolveTextBounds({ ...text, x: candidate.x, y: candidate.y }, text.profile);
+}
+
+function intervalContains(bounds, container) {
+  const epsilon = 1e-9;
+  return bounds.left >= container.left - epsilon &&
+    bounds.right <= container.right + epsilon &&
+    bounds.top >= container.top - epsilon &&
+    bounds.bottom <= container.bottom + epsilon;
+}
+
+function distanceToRectangle(centerX, centerY, bounds) {
+  const x = Math.max(bounds.left, Math.min(centerX, bounds.right));
+  const y = Math.max(bounds.top, Math.min(centerY, bounds.bottom));
+  return Math.hypot(x - centerX, y - centerY);
+}
+
+function thetaForPoint(point, geometry) {
+  return Math.atan2(point.x - geometry.centerX, geometry.centerY - point.y) *
+    180 / Math.PI;
+}
+
+function angleWithin(theta, start, end) {
+  const sweep = end - start;
+  if (Math.abs(sweep) >= 360 - 1e-9) return true;
+  const direction = Math.sign(sweep);
+  const progress = ((direction * (theta - start)) % 360 + 360) % 360;
+  return progress <= Math.abs(sweep) + 1e-9;
+}
+
+function arcContains(bounds, geometry) {
+  const points = [
+    { x: bounds.left, y: bounds.top },
+    { x: bounds.right, y: bounds.top },
+    { x: bounds.right, y: bounds.bottom },
+    { x: bounds.left, y: bounds.bottom },
+    { x: (bounds.left + bounds.right) / 2, y: bounds.top },
+    { x: bounds.right, y: (bounds.top + bounds.bottom) / 2 },
+    { x: (bounds.left + bounds.right) / 2, y: bounds.bottom },
+    { x: bounds.left, y: (bounds.top + bounds.bottom) / 2 }
+  ];
+  const minimumRadius = distanceToRectangle(
+    geometry.centerX,
+    geometry.centerY,
+    bounds
+  );
+  const maximumRadius = Math.max(...points.slice(0, 4).map(point =>
+    Math.hypot(point.x - geometry.centerX, point.y - geometry.centerY)
+  ));
+  const epsilon = 1e-9;
+  return minimumRadius >= geometry.innerRadius - epsilon &&
+    maximumRadius <= geometry.outerRadius + epsilon &&
+    points.every(point => angleWithin(
+      thetaForPoint(point, geometry),
+      geometry.startTheta,
+      geometry.endTheta
+    ));
+}
+
+function arcRole(geometry, role) {
+  const theta = geometry.startTheta +
+    (geometry.endTheta - geometry.startTheta) / 2;
+  const radians = theta * Math.PI / 180;
+  const radial = { x: Math.sin(radians), y: -Math.cos(radians) };
+  const radius = role === "start" ? geometry.innerRadius : geometry.outerRadius;
+  return {
+    point: {
+      x: geometry.centerX + radial.x * radius,
+      y: geometry.centerY + radial.y * radius
+    },
+    outward: role === "start"
+      ? { x: -radial.x, y: -radial.y }
+      : radial
+  };
+}
+
+function geometryRole(geometry, role) {
+  return geometry.kind === "arc" ? arcRole(geometry, role) : geometry[role];
+}
+
+function geometryCenter(geometry) {
+  if (geometry.kind !== "arc") return geometry.center;
+  const role = arcRole(geometry, "end");
+  const radius = (geometry.innerRadius + geometry.outerRadius) / 2;
+  return {
+    x: geometry.centerX + role.outward.x * radius,
+    y: geometry.centerY + role.outward.y * radius
+  };
+}
+
+function candidateForAnchor(anchor, geometry, placement, text) {
+  if (anchor === "center") return centerCandidate(geometryCenter(geometry), text);
+  const roleName = anchor.endsWith("Start") ? "start" : "end";
+  const role = geometryRole(geometry, roleName);
+  const outside = anchor.startsWith("outside");
+  const direction = outside
+    ? role.outward
+    : { x: -role.outward.x, y: -role.outward.y };
+  return boundaryCandidate(role.point, direction, placement.gap, text);
+}
+
+function arcOutsideStartCrossesCenter(candidate, geometry, text) {
+  if (geometry.kind !== "arc") return false;
+  const radial = arcRole(geometry, "end").outward;
+  const projections = projectionRange(candidateBounds(candidate, text), radial);
+  const centerProjection = geometry.centerX * radial.x + geometry.centerY * radial.y;
+  return projections.minimum < centerProjection - 1e-9;
+}
+
+function fitsSource(candidate, geometry, text) {
+  if (geometry.kind === "point") return true;
+  const bounds = candidateBounds(candidate, text);
+  return geometry.kind === "arc"
+    ? arcContains(bounds, geometry)
+    : intervalContains(bounds, geometry.bounds);
+}
+
+function outsideFallback(anchor) {
+  return anchor === "insideStart" ? "outsideStart" : "outsideEnd";
+}
+
+export function resolveMarkLabelPlacement({ placement, geometry, text } = {}, profile) {
+  text = { ...text, profile };
+  const normalized = normalizeMarkLabelPlacement(placement);
+  validatePlacementGeometry(geometry, normalized.anchor);
+  let anchor = normalized.anchor;
+  let candidate = candidateForAnchor(anchor, geometry, normalized, text);
+  const requiresFit = anchor === "center" || anchor.startsWith("inside");
+  if (requiresFit && !fitsSource(candidate, geometry, text)) {
+    if (normalized.overflow === "hide") {
+      return cloneAndFreeze({ visible: false, anchor, fallback: false });
+    }
+    if (normalized.overflow === "outside") {
+      anchor = outsideFallback(anchor);
+      candidate = candidateForAnchor(anchor, geometry, normalized, text);
+    }
+  }
+  if (
+    anchor === "outsideStart" &&
+    normalized.overflow !== "allow" &&
+    arcOutsideStartCrossesCenter(candidate, geometry, text)
+  ) {
+    return cloneAndFreeze({
+      visible: false,
+      anchor,
+      fallback: anchor !== normalized.anchor
+    });
+  }
+  return cloneAndFreeze({
+    visible: true,
+    anchor,
+    fallback: anchor !== normalized.anchor,
+    ...candidate,
+    bounds: candidateBounds(candidate, text)
+  });
+}
 
 export const DEFAULT_LABEL_LAYOUT_GEOMETRY = cloneAndFreeze({
   axis: "both",
@@ -158,7 +502,7 @@ export function enumerateLabelOffsets({ axis, padding, maxDisplacement }) {
   return cloneAndFreeze(candidates);
 }
 
-function textBounds(item, offset = { x: 0, y: 0 }) {
+function textBounds(item, offset = { x: 0, y: 0 }, profile) {
   return resolveTextBounds({
     x: item.x + offset.x,
     y: item.y + offset.y,
@@ -169,7 +513,7 @@ function textBounds(item, offset = { x: 0, y: 0 }) {
     textAlign: item.textAlign,
     textBaseline: item.textBaseline,
     rotation: item.rotation
-  });
+  }, profile);
 }
 
 function candidateScore(bounds, boundary, placed, candidate, order) {
@@ -209,7 +553,7 @@ function overlapPairs(items) {
   return pairs;
 }
 
-export function resolveLabelLayout({ items, bounds, ...options } = {}) {
+export function resolveLabelLayout({ items, bounds, ...options } = {}, profile) {
   if (!Array.isArray(items)) {
     throw new TypeError("Label layout requires an item array.");
   }
@@ -224,14 +568,14 @@ export function resolveLabelLayout({ items, bounds, ...options } = {}) {
   );
   const base = items.map(item => ({
     id: item.id,
-    collisionBounds: expanded(textBounds(item), policy.padding)
+    collisionBounds: expanded(textBounds(item, undefined, profile), policy.padding)
   }));
   const placed = [];
   const resolved = [];
   for (const item of items) {
     let best;
     for (const [order, candidate] of candidates.entries()) {
-      const boundsAtCandidate = textBounds(item, candidate);
+      const boundsAtCandidate = textBounds(item, candidate, profile);
       const collisionBounds = expanded(boundsAtCandidate, policy.padding);
       const score = candidateScore(
         collisionBounds,
@@ -276,7 +620,7 @@ export function resolveLabelLayout({ items, bounds, ...options } = {}) {
   });
 }
 
-export function assertPolarTextLayout({ canvas, items, label }) {
+export function assertPolarTextLayout({ canvas, items, label }, profile) {
   const dimensions = canvas?.properties;
   if (
     ![dimensions?.width, dimensions?.height].every(Number.isFinite) ||
@@ -284,7 +628,7 @@ export function assertPolarTextLayout({ canvas, items, label }) {
   ) {
     throw new Error("Polar text layout requires finite Canvas dimensions.");
   }
-  const bounds = items.map(resolveTextBounds);
+  const bounds = items.map(item => resolveTextBounds(item, profile));
   const outside = bounds.some(item => !textBoundsFitCanvas(item, dimensions));
   let overlap = false;
   for (let first = 0; first < bounds.length && !overlap; first += 1) {

package/src/layout/legend.js

@@ -3,15 +3,15 @@ import {
   measureTextWidth
 } from "../core/textMetrics.js";
 
-export function measureLegendTextWidth(value, style = { fontSize: 12 }) {
-  return measureTextWidth(formatVisibleText(value), style);
+export function measureLegendTextWidth(value, style = { fontSize: 12 }, profile) {
+  return measureTextWidth(formatVisibleText(value), style, profile);
 }
 
-export function resolveLegendGrid(config, width, count, symbolHeight) {
+export function resolveLegendGrid(config, width, count, symbolHeight, profile) {
   const labels = config.domain.map(formatVisibleText);
   const itemWidths = labels.map(
     label => width + config.labels.offset +
-      measureLegendTextWidth(label, config.labels)
+      measureLegendTextWidth(label, config.labels, profile)
   );
   const columnCount = Math.min(config.columns ?? count, count);
   const rowCount = Math.ceil(count / columnCount);

package/src/layout/legendItems.js

@@ -3,7 +3,7 @@ import { alignLegendStart, resolveLegendGrid } from "./legend.js";
 
 // Measure item content before choosing its edge. Family owners supply the
 // sample dimensions and formatted labels; this module does not inspect scales.
-export function resolveLegendItemLayout(plot, config, labels, symbol, canvas) {
+export function resolveLegendItemLayout(plot, config, labels, symbol, canvas, profile) {
   const strokes = labels.map((_, index) => Array.isArray(symbol.strokeWidth)
     ? symbol.strokeWidth[index] : symbol.strokeWidth ?? 0);
   const sampleBounds = labels.map((_, index) => symbol.itemBounds?.[index] ?? {
@@ -19,17 +19,17 @@ export function resolveLegendItemLayout(plot, config, labels, symbol, canvas) {
     ...sampleBounds.map(bounds => 2 * Math.max(-bounds.top, bounds.bottom)));
   const side = ["left", "right"].includes(config.position);
   const titleVisible = config.titleVisible !== false;
-  const titleWidth = titleVisible ? measureTextWidth(config.title, config.titleStyle) : 0;
+  const titleWidth = titleVisible ? measureTextWidth(config.title, config.titleStyle, profile) : 0;
   const titleHeight = titleVisible ? config.titleStyle.fontSize : 0;
   const itemWidth = sampleWidth + config.labels.offset + Math.max(...labels.map(
-    text => measureTextWidth(text, config.labels)
+    text => measureTextWidth(text, config.labels, profile)
   ));
   let symbolX;
   let labelX;
   let itemY;
   let title;
   if (config.layout === "legacy-bottom") {
-    const widths = labels.map(text => sampleWidth + config.labels.offset + measureTextWidth(text, config.labels));
+    const widths = labels.map(text => sampleWidth + config.labels.offset + measureTextWidth(text, config.labels, profile));
     const width = widths.reduce((sum, value) => sum + value, 0) + config.itemGap * (labels.length - 1);
     const x = config.align === "center" ? (canvas.width - width) / 2 : alignLegendStart(plot, width, config.align);
     let cursor = x;
@@ -54,7 +54,7 @@ export function resolveLegendItemLayout(plot, config, labels, symbol, canvas) {
     itemY = labels.map((_, index) => firstY + index * pitch);
     title = { x, y: plot.y + 20, align: "left" };
   } else {
-    const grid = resolveLegendGrid({ ...config, domain: labels }, sampleWidth, labels.length, sampleHeight);
+    const grid = resolveLegendGrid({ ...config, domain: labels }, sampleWidth, labels.length, sampleHeight, profile);
     const inline = config.titlePosition === "left" && titleVisible;
     const prefix = inline ? titleWidth + 20 : 0;
     const width = inline ? prefix + grid.gridWidth : Math.max(titleWidth, grid.gridWidth);
@@ -79,7 +79,7 @@ export function resolveLegendItemLayout(plot, config, labels, symbol, canvas) {
   }
   const textBounds = (x, y, text, style, align = "left") => resolveTextBounds({
     x, y, text, ...style, textAlign: align, textBaseline: "middle"
-  });
+  }, profile);
   const bounds = [
     ...(titleVisible ? [textBounds(title.x, title.y, config.title, config.titleStyle, title.align)] : []),
     ...labels.map((label, index) => textBounds(labelX[index], itemY[index], label, config.labels)),

package/src/layout/text.js

@@ -5,12 +5,12 @@ export {
   resolveTextBounds
 } from "../core/textMetrics.js";
 
-function wrapCodePoints(text, maxWidth, style) {
+function wrapCodePoints(text, maxWidth, style, profile) {
   const lines = [];
   let line = "";
   for (const codePoint of [...text]) {
     const candidate = line + codePoint;
-    if (line !== "" && measureTextWidth(candidate, style) > maxWidth) {
+    if (line !== "" && measureTextWidth(candidate, style, profile) > maxWidth) {
       lines.push(line);
       line = codePoint;
     } else {
@@ -21,22 +21,22 @@ function wrapCodePoints(text, maxWidth, style) {
   return lines;
 }
 
-function wrapWords(text, maxWidth, style) {
+function wrapWords(text, maxWidth, style, profile) {
   const lines = [];
   let line = "";
   for (const word of text.trim().split(/\s+/u)) {
-    if (measureTextWidth(word, style) > maxWidth) {
+    if (measureTextWidth(word, style, profile) > maxWidth) {
       if (line !== "") {
         lines.push(line);
         line = "";
       }
-      const fragments = wrapCodePoints(word, maxWidth, style);
+      const fragments = wrapCodePoints(word, maxWidth, style, profile);
       lines.push(...fragments.slice(0, -1));
       line = fragments.at(-1);
       continue;
     }
     const candidate = line === "" ? word : `${line} ${word}`;
-    if (line !== "" && measureTextWidth(candidate, style) > maxWidth) {
+    if (line !== "" && measureTextWidth(candidate, style, profile) > maxWidth) {
       lines.push(line);
       line = word;
     } else {
@@ -50,7 +50,8 @@ function wrapWords(text, maxWidth, style) {
 export function wrapText(text, {
   maxWidth,
   mode = "word",
-  style
+  style,
+  profile
 } = {}) {
   if (maxWidth === undefined) return [text];
   if (!Number.isFinite(maxWidth) || maxWidth <= 0) {
@@ -60,6 +61,6 @@ export function wrapText(text, {
     throw new Error(`Unsupported text wrap mode "${mode}".`);
   }
   return mode === "word"
-    ? wrapWords(text, maxWidth, style)
-    : wrapCodePoints(text, maxWidth, style);
+    ? wrapWords(text, maxWidth, style, profile)
+    : wrapCodePoints(text, maxWidth, style, profile);
 }

package/src/layout/title.js

@@ -4,16 +4,16 @@ function lineCenters(lines, style, lineHeight, start) {
   return lines.map((_, index) => start + style.fontSize / 2 + index * lineHeight);
 }
 
-export function buildTitleReadingBlock({ text, subtitle }, config) {
+export function buildTitleReadingBlock({ text, subtitle }, config, profile) {
   const titleLines = wrapText(text, {
     maxWidth: config.maxWidth,
     mode: config.wrap,
-    style: config.titleStyle
+    style: config.titleStyle, profile
   });
   const subtitleLines = subtitle === undefined ? [] : wrapText(subtitle, {
     maxWidth: config.maxWidth,
     mode: config.wrap,
-    style: config.subtitleStyle
+    style: config.subtitleStyle, profile
   });
   const titleLineHeight = config.lineHeight ?? config.titleStyle.fontSize * 1.2;
   const subtitleLineHeight = config.lineHeight ??
@@ -36,8 +36,8 @@ export function buildTitleReadingBlock({ text, subtitle }, config) {
     ? titleBottom
     : subtitleCenters.at(-1) + config.subtitleStyle.fontSize / 2;
   const widths = [
-    ...titleLines.map(line => measureTextWidth(line, config.titleStyle)),
-    ...subtitleLines.map(line => measureTextWidth(line, config.subtitleStyle))
+    ...titleLines.map(line => measureTextWidth(line, config.titleStyle, profile)),
+    ...subtitleLines.map(line => measureTextWidth(line, config.subtitleStyle, profile))
   ];
   return {
     titleLines,
@@ -61,7 +61,7 @@ export function alignedTextAnchor(start, length, align) {
   return start + length;
 }
 
-function axisAlignedTextBounds({ x, y, text, style, align, rotation }) {
+function axisAlignedTextBounds({ x, y, text, style, align, rotation }, profile) {
   return resolveTextBounds({
     x,
     y,
@@ -70,7 +70,7 @@ function axisAlignedTextBounds({ x, y, text, style, align, rotation }) {
     textAlign: align,
     textBaseline: "middle",
     rotation
-  });
+  }, profile);
 }
 
 function unionBounds(bounds) {
@@ -82,7 +82,7 @@ function unionBounds(bounds) {
   }), { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity });
 }
 
-export function resolveTitleComponentBounds(component, style) {
+export function resolveTitleComponentBounds(component, style, profile) {
   return unionBounds(component.lines.map((text, index) => axisAlignedTextBounds({
     x: Array.isArray(component.x) ? component.x[index] : component.x,
     y: Array.isArray(component.y) ? component.y[index] : component.y,
@@ -90,7 +90,7 @@ export function resolveTitleComponentBounds(component, style) {
     style,
     align: component.textAlign,
     rotation: component.rotation
-  })));
+  }, profile)));
 }
 
 export function unionTitleBounds(bounds) {

package/src/materialization/bars/aggregate.js

@@ -1,6 +1,10 @@
 import { deriveSeriesBarCells } from "../../grammar/bars/aggregate.js";
 import { resolveBarChannels, resolveBarColorLayout, resolveBarOffsetChannel } from "../../grammar/bars/policy.js";
-import { mapContinuousScaleValues, mapOrdinalPositionValues } from "../../grammar/scales/index.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues,
+  readScaleField
+} from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
 import { DEFAULT_BAR_FILL, resolveBarAppearance } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
@@ -19,6 +23,24 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
   const segments = deriveSeriesBarCells(dataset.values, layer, temporal ? undefined : categoryScale.domain,
     grouped ? offsetScale.domain : layer.encoding.group === undefined && color?.fieldType !== "quantitative" ? colorScale?.domain : undefined);
   const fills = color === undefined ? undefined : mapScaleConsumerValues(segments.map(segment => segment.cell.color), colorScale, "color");
+  const stroke = layer.encoding?.stroke;
+  const strokeValues = stroke === undefined ? undefined : segments.map(segment => {
+    const values = readScaleField(
+      segment.cell.sourceIndices.map(index => dataset.values[index]),
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (new Set(values).size !== 1) {
+      throw new Error("Bar stroke requires one value within each aggregate cell.");
+    }
+    return values[0];
+  });
+  const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+    strokeValues,
+    resolved.resolvedScales[stroke.scale],
+    "stroke"
+  );
   const config = resolved.markConfigs[layer.id] ?? {};
   const existing = resolved.graphicSpec.objects[layer.id].items;
   const width = resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step));
@@ -42,6 +64,7 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
     return { x: vertical ? position : Math.min(a, b), y: vertical ? Math.min(a, b) : position,
       width: vertical ? width : Math.abs(a - b), height: vertical ? Math.abs(a - b) : width,
       fill: fills?.[index] ?? config.barAppearance?.fill ?? config.fill ?? DEFAULT_BAR_FILL,
-      ...resolveBarAppearance(config, existing[index]?.properties) };
+      ...resolveBarAppearance(config, existing[index]?.properties),
+      ...(strokes === undefined ? {} : { stroke: strokes[index] }) };
   });
 }