@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/badge/badge.ts

@@ -0,0 +1,97 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { popIn } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+export const badgeVariants = cva(
+  // `self-start` keeps the badge hugging its content. Lynx views default to `linear`
+  // layout, where a child with no explicit width stretches to fill the parent's cross
+  // axis — so without it a badge renders full-width. (Web shadcn uses `inline-flex` for
+  // the same shrink-to-fit; Lynx has no inline display, so align-self is the lever.)
+  'items-center self-start rounded-full px-2.5 py-0.5 flex',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        secondary: 'bg-secondary',
+        destructive: 'bg-destructive',
+        outline: 'border border-border bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type BadgeVariant = NonNullable<
+  VariantProps<typeof badgeVariants>['variant']
+>;
+
+@Component({
+  selector: 'ui-badge',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view #container [class]="containerClass()">
+      <text [class]="labelClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiBadge {
+  readonly variant = input<BadgeVariant>('default');
+  /**
+   * When true, badge pops in with a spring animation on first render
+   */
+  readonly animated = input(true);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+
+  constructor() {
+    effect(() => {
+      const el = this.containerRef()?.nativeElement;
+      // popIn calls el.animate() which is inert in jsdom (the offscreen web
+      // renderer path — see animate.ts's transitionTransform comment). The
+      // effect's rendering-adjacent work is not exercisable from a JIT test,
+      // so ignore the animation branch for coverage.
+      /* v8 ignore next 3 */
+      if (el && this.animated()) {
+        popIn(el, { duration: 200 });
+      }
+    });
+  }
+
+  protected readonly containerClass = computed(() =>
+    cn(badgeVariants({ variant: this.variant() }), this.userClass()),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn(badgeTextVariants({ variant: this.variant() })),
+  );
+}

package/dist/ui/components/badge/index.ts

@@ -0,0 +1 @@
+export { UiBadge, badgeVariants, type BadgeVariant } from './badge';

package/dist/ui/components/bar-chart/bar-chart-render.test.ts

@@ -0,0 +1,174 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiCartesianChart } from '../cartesian-chart/cartesian-chart';
+import { UiBarChart, UiBarSeries } from './bar-chart';
+
+describe('UiBarChart', () => {
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiBarChart);
+    expect(container).toBeTruthy();
+  });
+
+  it('folds the baseline into the y-axis domain', async () => {
+    const { componentRef } = await render(UiBarChart);
+    const inst = componentRef.instance as UiBarChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 5 },
+      { x: 1, y: 10 },
+      { x: 2, y: 8 },
+    ]);
+    setInputSignal(inst.baseline, 0);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number] };
+      yAxis: () => { domain: readonly [number, number] };
+      effectivePadding: () => { left?: number; right?: number };
+    };
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(10);
+    // 3 bars → half-bar inset = 0.5 / (3-1) = 0.25
+    expect(cast.effectivePadding().left).toBeCloseTo(0.25);
+    expect(cast.effectivePadding().right).toBeCloseTo(0.25);
+  });
+
+  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
+    const { componentRef } = await render(UiBarChart);
+    const inst = componentRef.instance as UiBarChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+    ]);
+    setInputSignal(inst.xMin, -5);
+    setInputSignal(inst.xMax, 20);
+    setInputSignal(inst.yMin, -1);
+    setInputSignal(inst.yMax, 15);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number] };
+      yAxis: () => { domain: readonly [number, number] };
+    };
+    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(-5);
+    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(20);
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(-1);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(15);
+  });
+
+  it('single-datum series drops the half-bar padding', async () => {
+    const { componentRef } = await render(UiBarChart);
+    const inst = componentRef.instance as UiBarChart;
+    setInputSignal(inst.data, [{ x: 0, y: 5 }]);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      effectivePadding: () => { left?: number; right?: number };
+    };
+    // n === 1 → half === 0
+    expect(cast.effectivePadding().left).toBe(0);
+    expect(cast.effectivePadding().right).toBe(0);
+  });
+
+  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+    const { componentRef } = await render(UiBarChart);
+    const inst = componentRef.instance as UiBarChart;
+    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
+    expect(inst.yTickFormat()(1.005)).toBe('1');
+  });
+
+  it('user padding overrides the auto half-bar inset per side', async () => {
+    const { componentRef } = await render(UiBarChart);
+    const inst = componentRef.instance as UiBarChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 5 },
+      { x: 1, y: 10 },
+    ]);
+    setInputSignal(inst.padding, { left: 0.1 });
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      effectivePadding: () => { left?: number; right?: number };
+    };
+    // left explicitly set → wins; right still auto = 0.5
+    expect(cast.effectivePadding().left).toBeCloseTo(0.1);
+    expect(cast.effectivePadding().right).toBeCloseTo(0.5);
+  });
+});
+
+describe('UiBarSeries', () => {
+  const renderSeries = async () => {
+    const parentResult = await render(UiCartesianChart);
+    const parent = parentResult.componentRef.instance as UiCartesianChart;
+    setInputSignal(parent.xDomain, [0, 10]);
+    setInputSignal(parent.yDomain, [0, 10]);
+    await waitForUpdate();
+    const seriesResult = await render(UiBarSeries, {
+      providers: [{ provide: UiCartesianChart, useValue: parent }],
+    });
+    const series = seriesResult.componentRef.instance as UiBarSeries;
+    setInputSignal(series.data, [
+      { x: 0, y: 2 },
+      { x: 5, y: 8 },
+      { x: 10, y: 5 },
+    ]);
+    await waitForUpdate();
+    return { parent, series };
+  };
+
+  it('renders a rectangle per datum with the fallback color', async () => {
+    const { series } = await renderSeries();
+    const cast = series as unknown as {
+      bars: () => { style: string; point: { x: number; y: number } }[];
+    };
+    const bars = cast.bars();
+    expect(bars.length).toBe(3);
+    for (const b of bars) {
+      expect(b.style).toContain('background-color: var(--primary)');
+    }
+  });
+
+  it('cycles through the per-bar palette when colors are provided', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.colors, ['#f00', '#0f0']);
+    await waitForUpdate();
+    const cast = series as unknown as { bars: () => { style: string }[] };
+    const bars = cast.bars();
+    expect(bars[0].style).toContain('#f00');
+    expect(bars[1].style).toContain('#0f0');
+    // wraps around
+    expect(bars[2].style).toContain('#f00');
+  });
+
+  it('emits barTap with the source point when a bar is tapped', async () => {
+    const { series } = await renderSeries();
+    const cb = vi.fn();
+    series.barTap.subscribe(cb);
+    (
+      series as unknown as { onBarTap: (p: { x: number; y: number }) => void }
+    ).onBarTap({ x: 1, y: 2 });
+    expect(cb).toHaveBeenCalledWith({ x: 1, y: 2 });
+  });
+
+  it('single-datum series uses the fallback bar width', async () => {
+    const parentResult = await render(UiCartesianChart);
+    const parent = parentResult.componentRef.instance as UiCartesianChart;
+    setInputSignal(parent.xDomain, [0, 10]);
+    setInputSignal(parent.yDomain, [0, 10]);
+    await waitForUpdate();
+    const seriesResult = await render(UiBarSeries, {
+      providers: [{ provide: UiCartesianChart, useValue: parent }],
+    });
+    const series = seriesResult.componentRef.instance as UiBarSeries;
+    setInputSignal(series.data, [{ x: 5, y: 5 }]);
+    await waitForUpdate();
+    const cast = series as unknown as { bars: () => { style: string }[] };
+    const [bar] = cast.bars();
+    // fallback = 24px
+    expect(bar.style).toContain('width: 24.00px');
+  });
+
+  it('clamps the baseline into the plot when it lies outside the domain', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.baseline, 999);
+    await waitForUpdate();
+    const cast = series as unknown as { bars: () => { style: string }[] };
+    expect(cast.bars().length).toBe(3);
+  });
+});

package/dist/ui/components/bar-chart/bar-chart.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock Angular (and the transitively-loaded cartesian-chart Angular usage) so
+// importing the module needs no framework runtime. Only the exported pure
+// `computeBars` is exercised; the components are never built.
+vi.mock('@angular/core', () => ({
+  Component: () => () => {},
+  ViewEncapsulation: { None: 0 },
+  computed: () => () => {},
+  inject: () => ({}),
+  input: () => () => {},
+  output: () => () => {},
+}));
+
+vi.mock('@blotch/angular-lynx', () => ({
+  LYNX_ELEMENTS: [],
+  // cartesian-chart (imported transitively) registers these in its decorator.
+  LynxGestureDetector: class {},
+  PanGesture: class {},
+  PinchGesture: class {},
+  Gesture: { Simultaneous: () => ({}) },
+}));
+
+const { computeBars } = await import('./bar-chart');
+
+// Screen y grows downward, so a value ABOVE the baseline has a SMALLER pixel y
+// than baseY. Baseline pixel y = 100 in these cases (bottom of the plot).
+describe('computeBars', () => {
+  it('draws a positive bar from the baseline up to the value, centered on cx', () => {
+    // value projects to y=30 (above the baseline at y=100).
+    const [bar] = computeBars([{ cx: 50, valueY: 30 }], 100, 12);
+    expect(bar.top).toBe(30); // min(valueY, baseY) — the higher edge
+    expect(bar.height).toBe(70); // |valueY - baseY|
+    expect(bar.width).toBe(12);
+    expect(bar.left).toBe(50 - 6); // cx - barWidth/2
+  });
+
+  it('draws a negative bar growing downward from the baseline', () => {
+    // value projects BELOW the baseline, so valueY (140) > baseY (100).
+    const [bar] = computeBars([{ cx: 20, valueY: 140 }], 100, 10);
+    expect(bar.top).toBe(100); // min(valueY, baseY) = baseY here
+    expect(bar.height).toBe(40); // grows down to the value
+  });
+
+  it('draws nothing (zero height) for a value exactly on the baseline', () => {
+    // A bar's height is its datum: on the baseline there is nothing to draw, so
+    // the default minBarHeight of 0 leaves it invisible rather than a sliver.
+    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12);
+    expect(bar.height).toBe(0);
+  });
+
+  it('honors a custom minimum bar height', () => {
+    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12, 3);
+    expect(bar.height).toBe(3);
+  });
+
+  it('centers every bar on its own cx', () => {
+    const bars = computeBars(
+      [
+        { cx: 10, valueY: 40 },
+        { cx: 60, valueY: 20 },
+      ],
+      100,
+      8,
+    );
+    expect(bars[0].left).toBe(10 - 4);
+    expect(bars[1].left).toBe(60 - 4);
+  });
+
+  it('returns an empty array for no bars', () => {
+    expect(computeBars([], 100, 12)).toEqual([]);
+  });
+});

package/dist/ui/components/bar-chart/bar-chart.ts

@@ -0,0 +1,327 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type ChartPadding,
+  type ChartPoint,
+  UiCartesianChart,
+  niceScale,
+} from '../cartesian-chart/cartesian-chart';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+// A bar is just an (x, y) datum — x is the category position, y the bar's value —
+// so it reuses the shared `ChartPoint` rather than defining its own. That also
+// lets a bar series and a line/area series share one dataset on the same axes.
+
+/** One bar after projection into plot-local pixel space. */
+type ProjectedBar = {
+  /** Center x of the bar, in px. */
+  cx: number;
+  /** Pixel y of the bar's value (its far edge from the baseline). */
+  valueY: number;
+};
+
+/** An axis-aligned rectangle in plot-local pixel space. */
+export type BarShape = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+// ---------------------------------------------------------------------------
+// Pure geometry (exported so it can be unit-tested without Angular)
+// ---------------------------------------------------------------------------
+
+/**
+ * Turns projected bars — already in plot-local pixel space — into rectangles
+ * ready to render as `<view>`s. A bar is the simplest chart mark on Lynx: one
+ * axis-aligned box from the shared `baseY` (the baseline's pixel y) to the
+ * value, so this is a straight geometric mapping with no rotation or fill
+ * rasterization (unlike the line and area series).
+ *
+ * Screen y grows *downward*, so a value above the baseline has a *smaller*
+ * `valueY` than `baseY`. Taking `top = min(valueY, baseY)` therefore anchors the
+ * rectangle at whichever edge is visually higher, which makes bars for negative
+ * values (value below the baseline) grow *downward* from the baseline correctly.
+ *
+ * Unlike a candlestick doji, `minBarHeight` defaults to `0`: a bar's height *is*
+ * its datum, so a value exactly on the baseline should draw nothing rather than
+ * a misleading sliver. Callers wanting every bar guaranteed visible can raise it.
+ *
+ * @param baseY pixel y of the baseline every bar grows from.
+ * @param barWidth width of each bar in px.
+ * @param minBarHeight floor for the bar height (0 = honest zero-height at baseline).
+ */
+export const computeBars = (
+  bars: readonly ProjectedBar[],
+  baseY: number,
+  barWidth: number,
+  minBarHeight = 0,
+): BarShape[] =>
+  bars.map((b) => {
+    const top = Math.min(b.valueY, baseY);
+    const height = Math.max(Math.abs(b.valueY - baseY), minBarHeight);
+    return { left: b.cx - barWidth / 2, top, width: barWidth, height };
+  });
+
+// ---------------------------------------------------------------------------
+// Rendering helpers (mirror the equivalents in line-chart.ts / area-chart.ts —
+// kept local so this module stays self-contained when scaffolded by `dolan add`)
+// ---------------------------------------------------------------------------
+
+/**
+ * Formats a pixel value for an inline style, avoiding scientific notation.
+ */
+const px = (n: number): string => `${n.toFixed(2)}px`;
+
+/**
+ * Default axis label formatter — plain JS only (no `Intl`, absent in Lynx).
+ */
+const defaultTickFormat = (value: number): string =>
+  String(Math.round(value * 100) / 100);
+
+const clamp = (value: number, lo: number, hi: number): number =>
+  Math.max(lo, Math.min(hi, value));
+
+// Fallback bar width (px) when there is only a single bar, so there is no
+// neighbor to derive a spacing from. Matches the candlestick series' fallback.
+const SINGLE_BAR_WIDTH = 24;
+
+/**
+ * A single bar series drawn inside a `<ui-cartesian-chart>`. Reads the shared
+ * scales from the parent chart via DI and renders one `<view>` rectangle per
+ * datum, from the shared `baseline` up (or down) to the value.
+ *
+ * ## Why the host is `position: absolute; width/height: 100%`
+ * Identical to `UiLineSeries`: Lynx resolves an absolute child against its
+ * **direct parent** (there is no `position: static`), so the host itself must be
+ * the plot-sized containing block. Every bar is a direct child of it.
+ *
+ * ## Per-bar colors
+ * `color` fills every bar by default. Pass `colors` to give each bar its own
+ * hue (a categorical bar chart) — the palette cycles if it is shorter than the
+ * data, so a handful of colors tint any number of bars.
+ */
+@Component({
+  selector: 'ui-bar-series',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style:
+      'position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;',
+    '[class]': 'userClass()',
+  },
+  template: `
+    @for (bar of bars(); track $index) {
+      <view [style]="bar.style" (bindtap)="onBarTap(bar.point)"></view>
+    }
+  `,
+})
+export class UiBarSeries {
+  readonly #chart = inject(UiCartesianChart);
+
+  readonly data = input.required<ChartPoint[]>();
+  /** Fill for every bar. Overridden per bar by `colors` when that is set. */
+  readonly color = input('var(--primary)');
+  /** Per-bar fills (a categorical palette). Cycles when shorter than the data;
+   * an empty array falls back to `color`. */
+  readonly colors = input<string[]>([]);
+  /** Bar width as a fraction of the spacing between adjacent bars. 0.7 leaves a
+   * ~30% gap between bars, the conventional bar-chart look. */
+  readonly barWidthRatio = input(0.7);
+  /** Data-space y the bars grow from (usually 0). Values below it grow downward. */
+  readonly baseline = input(0);
+  /** Corner radius of each bar in px (0 = square corners). */
+  readonly radius = input(0);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly barTap = output<ChartPoint>();
+
+  // Project each datum into plot-local pixel space via the shared scales.
+  // Reading the chart's scale signals here makes this recompute whenever the
+  // domain or plot size changes.
+  readonly #projected = computed(() => {
+    const scaleX = this.#chart.xScale();
+    const scaleY = this.#chart.yScale();
+    return this.data().map((point) => ({
+      cx: scaleX(point.x),
+      valueY: scaleY(point.y),
+      point,
+    }));
+  });
+
+  // Bar width = a fraction of the pixel spacing between bar centers, so bars
+  // scale with the plot and never overlap. With one bar there is no spacing to
+  // measure, so fall back to a fixed width.
+  readonly #barWidth = computed(() => {
+    const projected = this.#projected();
+    const n = projected.length;
+    if (n < 2) return SINGLE_BAR_WIDTH;
+    const span = Math.abs(projected[n - 1].cx - projected[0].cx);
+    return (span / (n - 1)) * this.barWidthRatio();
+  });
+
+  protected readonly bars = computed(() => {
+    const projected = this.#projected();
+    const fallback = this.color();
+    const palette = this.colors();
+    const radius = this.radius();
+    // Clamp the baseline into the plot so a baseline outside the domain anchors
+    // the bars to the nearest edge (top/bottom) instead of drawing off-plot.
+    const baseY = clamp(
+      this.#chart.yScale()(this.baseline()),
+      0,
+      this.#chart.plotHeight(),
+    );
+    // computeBars works purely from the projected pixel fields; zip its output
+    // back with each source point so a bar's tap can emit the original datum.
+    return computeBars(projected, baseY, this.#barWidth()).map((shape, i) => {
+      const fill = palette.length ? palette[i % palette.length] : fallback;
+      return {
+        point: projected[i].point,
+        style:
+          `position: absolute; left: ${px(shape.left)}; top: ${px(shape.top)}; ` +
+          `width: ${px(shape.width)}; height: ${px(shape.height)}; ` +
+          `background-color: ${fill}; border-radius: ${px(radius)};`,
+      };
+    });
+  });
+
+  protected onBarTap(point: ChartPoint): void {
+    this.barTap.emit(point);
+  }
+}
+
+/**
+ * A ready-to-use bar chart for the common single-series case. Composes a
+ * `<ui-cartesian-chart>` with one `<ui-bar-series>` and auto-derives rounded
+ * axis domains + ticks from the data. For a line overlay, or full control over
+ * the axes, use `<ui-cartesian-chart>` with a `<ui-bar-series>` (and optionally
+ * a `<ui-line-series>`) directly.
+ */
+@Component({
+  selector: 'ui-bar-chart',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiCartesianChart, UiBarSeries],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ui-cartesian-chart
+      [xDomain]="xAxis().domain"
+      [yDomain]="yAxis().domain"
+      [xTicks]="xAxis().ticks"
+      [yTicks]="yAxis().ticks"
+      [width]="width()"
+      [height]="height()"
+      [tickCount]="tickCount()"
+      [showXGrid]="showXGrid()"
+      [xAxisLabel]="xAxisLabel()"
+      [yAxisLabel]="yAxisLabel()"
+      [padding]="effectivePadding()"
+      [xTickFormat]="xTickFormat()"
+      [yTickFormat]="yTickFormat()"
+      [zoomable]="zoomable()"
+      [zoomAxes]="zoomAxes()"
+      [showZoomControls]="showZoomControls()"
+      [minZoom]="minZoom()"
+      [maxZoom]="maxZoom()"
+      [zoomStep]="zoomStep()"
+      [class]="userClass()"
+    >
+      <ui-bar-series
+        [data]="data()"
+        [color]="color()"
+        [colors]="colors()"
+        [barWidthRatio]="barWidthRatio()"
+        [baseline]="baseline()"
+        [radius]="radius()"
+        (barTap)="barTap.emit($event)"
+      />
+    </ui-cartesian-chart>
+  `,
+})
+export class UiBarChart {
+  readonly data = input.required<ChartPoint[]>();
+  readonly color = input('var(--primary)');
+  readonly colors = input<string[]>([]);
+  readonly width = input(320);
+  readonly height = input(200);
+  readonly tickCount = input(5);
+  readonly barWidthRatio = input(0.7);
+  /** Data-space y the bars grow from (usually 0). Values below it grow downward. */
+  readonly baseline = input(0);
+  /** Corner radius of each bar in px. */
+  readonly radius = input(0);
+  /** Draw vertical gridlines at each x tick. */
+  readonly showXGrid = input(false);
+  /** Title for the x-axis (centered below the tick labels). */
+  readonly xAxisLabel = input<string>('');
+  /** Title for the y-axis (rotated in the left gutter). */
+  readonly yAxisLabel = input<string>('');
+  /** Inner inset of the plot area — merged over the auto half-bar padding
+   * (below), so any side you set wins. See {@link ChartPadding}. */
+  readonly padding = input<ChartPadding>({});
+  /** Force the x-axis lower/upper bound instead of deriving it from the data.
+   * Omitted bounds fall back to the data extremes. */
+  readonly xMin = input<number | undefined>(undefined);
+  readonly xMax = input<number | undefined>(undefined);
+  /** Force the y-axis lower/upper bound. The `baseline` is still folded in, so
+   * `yMin` only lowers the floor further — it can't clip a bar's base off. */
+  readonly yMin = input<number | undefined>(undefined);
+  readonly yMax = input<number | undefined>(undefined);
+  readonly xTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly yTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  // Pan/zoom — forwarded to the underlying <ui-cartesian-chart>. Off by default
+  // so a bar chart stays static (and scroll-view friendly) unless opted in.
+  readonly zoomable = input(false);
+  readonly zoomAxes = input<'x' | 'y' | 'xy'>('xy');
+  readonly showZoomControls = input(true);
+  readonly minZoom = input(1);
+  readonly maxZoom = input(8);
+  readonly zoomStep = input(1.4);
+
+  readonly barTap = output<ChartPoint>();
+
+  // Auto-compute rounded axes from the data extremes, letting an explicit
+  // min/max override either end. `Math.min/max(...[])` yield ±Infinity for empty
+  // data, which `niceScale` handles by padding.
+  protected readonly xAxis = computed(() => {
+    const xs = this.data().map((p) => p.x);
+    const lo = this.xMin() ?? Math.min(...xs);
+    const hi = this.xMax() ?? Math.max(...xs);
+    return niceScale(lo, hi, this.tickCount());
+  });
+  // Fold the baseline into the y-extent so the axis always spans the whole bar:
+  // a positive-only series still shows the baseline at the bottom, and negative
+  // values pull the domain below it. An explicit yMin/yMax overrides the
+  // corresponding data-derived end (the baseline still participates in the other).
+  protected readonly yAxis = computed(() => {
+    const ys = this.data().map((p) => p.y);
+    const base = this.baseline();
+    const lo = this.yMin() ?? Math.min(base, ...ys);
+    const hi = this.yMax() ?? Math.max(base, ...ys);
+    return niceScale(lo, hi, this.tickCount());
+  });
+
+  // A bar is centered on its x, so the first and last bars would spill over the
+  // plot edges. Insetting the scales by half a bar's spacing keeps them fully
+  // inside. User `padding` is spread last, so an explicit side wins.
+  protected readonly effectivePadding = computed<ChartPadding>(() => {
+    const n = this.data().length;
+    const half = n > 1 ? 0.5 / (n - 1) : 0;
+    return { left: half, right: half, ...this.padding() };
+  });
+}

package/dist/ui/components/bar-chart/index.ts

@@ -0,0 +1,6 @@
+export {
+  UiBarChart,
+  UiBarSeries,
+  computeBars,
+  type BarShape,
+} from './bar-chart';