@blotch/dolan 22.2.2 → 22.2.4

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

@@ -2,272 +2,114 @@ import {
   Component,
   ViewEncapsulation,
   computed,
-  inject,
   input,
   output,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { d3Curve, defineChart, dot, lineY } from '@tanstack/charts/universal';
+import type { ChartMark, ChartPoint } from '@tanstack/charts/types';
+import { curveMonotoneX } from 'd3-shape';
 
+import { UiChart, tooltip } from '../chart/chart';
 import {
-  type ChartPadding,
-  type ChartPoint,
-  UiCartesianChart,
-  niceScale,
-  sampleSmoothLine,
-} from '../cartesian-chart/cartesian-chart';
-
-// ---------------------------------------------------------------------------
-// Pure geometry (exported so it can be unit-tested without Angular)
-// ---------------------------------------------------------------------------
-
-/** A rotated line segment spec: start point (plot-local px), length, angle. */
-export type LineSegment = {
-  x: number;
-  y: number;
-  length: number;
-  /** Rotation in degrees, measured clockwise from the +x axis (screen y-down). */
-  angle: number;
-};
+  type CartesianPresetOptions,
+  PRESET_CHART_BINDINGS,
+  UiCartesianPreset,
+  type XYDatum,
+  presetAxes,
+} from '../chart/chart-presets';
+
+export type LineChartOptions = {
+  readonly data: readonly XYDatum[];
+  /** Any CSS color; theme tokens like `var(--primary)` follow dark mode. */
+  readonly color?: string;
+  readonly strokeWidth?: number;
+  readonly dotRadius?: number;
+  readonly showDots?: boolean;
+  /** Draws a monotone curve through the points instead of straight segments. */
+  readonly smooth?: boolean;
+} & CartesianPresetOptions;
 
 /**
- * Turns a polyline — already projected into plot-local pixel space — into a list
- * of rotated segment specs. Lynx has no `<line>`/SVG, so each segment is drawn
- * as a thin `<view>` rotated about its start point (see `UiLineSeries`).
+ * The definition `<ui-line-chart>` renders, for when you want to start from
+ * the preset and add marks of your own:
  *
- * The length uses `Math.sqrt(dx² + dy²)` rather than `Math.hypot` for the same
- * reason `niceNum` avoids `Math.log10`: `hypot` is a runtime method the Lynx
- * build pipeline may not polyfill, whereas `sqrt`/`atan2` are ES5 and always
- * present. Zero-length segments (duplicate consecutive points) are skipped so we
- * never emit a degenerate 0-width rotated view.
+ * ```ts
+ * const base = lineChartDefinition({ data });
+ * const withTarget = defineChart({ ...base, marks: [...base.marks, ruleY([80])] });
+ * ```
  */
-export const computeLineSegments = (
-  points: readonly ChartPoint[],
-): LineSegment[] => {
-  const segments: LineSegment[] = [];
-  for (let i = 0; i < points.length - 1; i++) {
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const dx = p2.x - p1.x;
-    const dy = p2.y - p1.y;
-    const length = Math.sqrt(dx * dx + dy * dy);
-    if (length === 0) continue;
-    const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-    segments.push({ x: p1.x, y: p1.y, length, angle });
+export const lineChartDefinition = (options: LineChartOptions) => {
+  const {
+    data,
+    color = 'var(--primary)',
+    strokeWidth = 2,
+    dotRadius = 3,
+    showDots = true,
+    smooth = false,
+  } = options;
+  const curve = smooth ? d3Curve(curveMonotoneX) : undefined;
+  const marks: ChartMark<XYDatum, any, any, any, any, any, any>[] = [
+    lineY(data, { x: 'x', y: 'y', stroke: color, strokeWidth, curve }),
+  ];
+  if (showDots && dotRadius > 0) {
+    marks.push(dot(data, { x: 'x', y: 'y', r: dotRadius, fill: color }));
   }
-  return segments;
+  return defineChart({
+    marks,
+    scales: presetAxes(options, {
+      x: data.map((d) => d.x),
+      y: data.map((d) => d.y),
+    }),
+    tooltip: options.tooltip === false ? false : tooltip,
+  });
 };
 
-// ---------------------------------------------------------------------------
-// Rendering helpers (mirror the equivalents in cartesian-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);
-
 /**
- * A single line series drawn inside a `<ui-cartesian-chart>`. Reads the shared
- * scales from the parent chart via DI and renders the polyline (rotated `<view>`
- * segments) plus a dot at each data point.
+ * A single-series line chart. For several series, a reference line or any
+ * other mark, build a definition and render it with `<ui-chart>`, starting
+ * from {@link lineChartDefinition} if you like.
  *
- * ## Why the host is `position: absolute; width/height: 100%`
- * Lynx resolves an absolute child against its **direct parent** (there is no
- * `position: static`). The marks are direct children of this host, so the host
- * itself must be the plot-sized containing block — it fills the plot area (its
- * direct parent, a definite-size box). Sizing an *inner* view instead would fail
- * because a content-sized host of absolute-only children collapses to 0×0.
- */
-@Component({
-  selector: 'ui-line-series',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    style:
-      'position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;',
-    '[class]': 'userClass()',
-  },
-  template: `
-    <!-- Segments render before dots so each dot paints on top of the line
-         (Lynx paint order follows source order; z-index is unnecessary). -->
-    @for (segment of segments(); track $index) {
-      <view [style]="segment.style"></view>
-    }
-    @for (dot of dots(); track $index) {
-      <view [style]="dot.style" (bindtap)="onPointTap(dot.point)"></view>
-    }
-  `,
-})
-export class UiLineSeries {
-  readonly #chart = inject(UiCartesianChart);
-
-  readonly data = input.required<ChartPoint[]>();
-  readonly color = input('var(--primary)');
-  readonly strokeWidth = input(2);
-  readonly dotRadius = input(3);
-  readonly showDots = input(true);
-  /** Draw a smooth (monotone-cubic) curve through the points instead of straight
-   * segments. Dots still sit on the raw data points. */
-  readonly smooth = input(false);
-  readonly userClass = input<string>('', { alias: 'class' });
-
-  readonly pointTap = output<ChartPoint>();
-
-  // Project each data point 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 #pixelPoints = computed(() => {
-    const scaleX = this.#chart.xScale();
-    const scaleY = this.#chart.yScale();
-    return this.data().map((point) => ({
-      x: scaleX(point.x),
-      y: scaleY(point.y),
-      point,
-    }));
-  });
-
-  protected readonly segments = computed(() => {
-    const stroke = this.strokeWidth();
-    const fill = this.color();
-    // Smooth mode replaces the raw polyline with a dense monotone-cubic
-    // resampling; `computeLineSegments` then rasterizes it identically — the
-    // curve is just made of many more, shorter rotated views.
-    const pixels = this.#pixelPoints();
-    const line = this.smooth() ? sampleSmoothLine(pixels) : pixels;
-    return computeLineSegments(line).map((s) => ({
-      style:
-        `position: absolute; left: ${px(s.x)}; top: ${px(s.y - stroke / 2)}; ` +
-        `width: ${px(s.length)}; height: ${px(stroke)}; ` +
-        `background-color: ${fill}; border-radius: ${px(stroke / 2)}; ` +
-        `transform-origin: 0 50%; transform: rotate(${s.angle.toFixed(2)}deg);`,
-    }));
-  });
-
-  protected readonly dots = computed(() => {
-    if (!this.showDots()) return [];
-    const radius = this.dotRadius();
-    const fill = this.color();
-    return this.#pixelPoints().map((p) => ({
-      point: p.point,
-      style:
-        `position: absolute; left: ${px(p.x - radius)}; top: ${px(p.y - radius)}; ` +
-        `width: ${px(radius * 2)}; height: ${px(radius * 2)}; ` +
-        `background-color: ${fill}; border-radius: ${px(radius)};`,
-    }));
-  });
-
-  protected onPointTap(point: ChartPoint): void {
-    this.pointTap.emit(point);
-  }
-}
-
-/**
- * A ready-to-use line chart for the common single-series case. Composes a
- * `<ui-cartesian-chart>` with one `<ui-line-series>` and auto-derives rounded
- * axis domains + ticks from the data. For multiple series or full control over
- * the axes, use `<ui-cartesian-chart>` with `<ui-line-series>` children directly.
+ * ```html
+ * <ui-line-chart [data]="revenue" [smooth]="true" yAxisLabel="Revenue" />
+ * ```
  */
 @Component({
   selector: 'ui-line-chart',
-  standalone: true,
-  imports: [LYNX_ELEMENTS, UiCartesianChart, UiLineSeries],
+  imports: [UiChart],
   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]="padding()"
-      [xTickFormat]="xTickFormat()"
-      [yTickFormat]="yTickFormat()"
-      [zoomable]="zoomable()"
-      [zoomAxes]="zoomAxes()"
-      [showZoomControls]="showZoomControls()"
-      [minZoom]="minZoom()"
-      [maxZoom]="maxZoom()"
-      [zoomStep]="zoomStep()"
-      [class]="userClass()"
-    >
-      <ui-line-series
-        [data]="data()"
-        [color]="color()"
-        [strokeWidth]="strokeWidth()"
-        [dotRadius]="dotRadius()"
-        [showDots]="showDots()"
-        [smooth]="smooth()"
-        (pointTap)="pointTap.emit($event)"
-      />
-    </ui-cartesian-chart>
+    <ui-chart
+      [definition]="definition()"
+      ${PRESET_CHART_BINDINGS}
+      (pointSelect)="onSelect($event)"
+    />
   `,
 })
-export class UiLineChart {
-  readonly data = input.required<ChartPoint[]>();
+export class UiLineChart extends UiCartesianPreset<XYDatum> {
+  readonly data = input.required<readonly XYDatum[]>();
   readonly color = input('var(--primary)');
-  readonly width = input(320);
-  readonly height = input(200);
-  readonly tickCount = input(5);
   readonly strokeWidth = input(2);
   readonly dotRadius = input(3);
   readonly showDots = input(true);
-  /** Draw a smooth (monotone-cubic) curve through the points. */
   readonly smooth = input(false);
-  /** 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, each side a fraction (0–1) — see {@link ChartPadding}. */
-  readonly padding = input<ChartPadding>({});
-  /** Force the x-axis lower/upper bound instead of deriving it from the data —
-   * e.g. `xMin={0}` to anchor the origin. Omitted bounds fall back to the data. */
-  readonly xMin = input<number | undefined>(undefined);
-  readonly xMax = input<number | undefined>(undefined);
-  /** Force the y-axis lower/upper bound (e.g. `yMin={0}` to start at zero). */
-  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.
-  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 pointTap = 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());
-  });
-  protected readonly yAxis = computed(() => {
-    const ys = this.data().map((p) => p.y);
-    const lo = this.yMin() ?? Math.min(...ys);
-    const hi = this.yMax() ?? Math.max(...ys);
-    return niceScale(lo, hi, this.tickCount());
-  });
+  /** The tapped point's datum. */
+  readonly pointTap = output<XYDatum>();
+
+  protected readonly definition = computed(() =>
+    lineChartDefinition({
+      ...this.commonOptions(),
+      data: this.data(),
+      color: this.color(),
+      strokeWidth: this.strokeWidth(),
+      dotRadius: this.dotRadius(),
+      showDots: this.showDots(),
+      smooth: this.smooth(),
+    }),
+  );
+
+  protected onSelect(point: ChartPoint | null): void {
+    const datum = this.datumOf(point);
+    if (datum) this.pointTap.emit(datum);
+  }
 }

package/dist/ui/components/list/list.test.ts

@@ -1,35 +1,133 @@
-import { Component } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { UiList } from './list';
 
 @Component({
-  standalone: true,
   imports: [UiList, LYNX_ELEMENTS],
-  template: `<ui-list><text>Item</text></ui-list>`,
+  template: `
+    <ui-list
+      [height]="height()"
+      [mainAxisGap]="mainAxisGap()"
+      [crossAxisGap]="crossAxisGap()"
+      [bounces]="bounces()"
+      [scrollBar]="scrollBar()"
+      [nestedScroll]="nestedScroll()"
+      [sticky]="sticky()"
+      class="bg-card"
+      (scrolledToStart)="reached.push('start')"
+      (scrolledToEnd)="reached.push('end')"
+    >
+      <text>Item</text>
+    </ui-list>
+  `,
 })
-class ListHost {}
+class ListHost {
+  readonly height = signal('');
+  readonly mainAxisGap = signal('');
+  readonly crossAxisGap = signal('');
+  readonly bounces = signal(true);
+  readonly scrollBar = signal(true);
+  readonly nestedScroll = signal(false);
+  readonly sticky = signal(false);
+  readonly reached: string[] = [];
+}
+
+const renderList = async () => {
+  const result = await render(ListHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as ListHost,
+    list: () => result.container.querySelector('list')!,
+  };
+};
+
+/**
+ * The values each boolean reached Lynx with, through `__SetAttribute`.
+ */
+const watchAttributes = () => {
+  const setAttribute = vi.spyOn(lynxMainThread(), '__SetAttribute');
+  return {
+    last: (name: string): unknown =>
+      setAttribute.mock.calls.filter((call) => call[1] === name).at(-1)?.[2],
+    restore: () => setAttribute.mockRestore(),
+  };
+};
 
 describe('UiList', () => {
-  it('renders projected content', async () => {
-    // Lynx `<list>` is virtualized — items are only added to the native tree by
-    // the componentAtIndex callback, which isn't driven from a unit test. Just
-    // assert the wrapper mounts (its own template bindings + host bindings are
-    // covered) without asserting on the item's text.
-    const { container } = await render(ListHost);
-    expect(container).toBeTruthy();
+  it('renders a single-column vertical list with the given class', async () => {
+    // Lynx `<list>` is virtualized: items join the native tree only through
+    // its componentAtIndex callback, which a unit test doesn't drive. So this
+    // checks the list itself rather than the projected item.
+    const { list } = await renderList();
+    expect(list().getAttribute('list-type')).toBe('single');
+    expect(list().getAttribute('span-count')).toBe('1');
+    expect(list().getAttribute('scroll-orientation')).toBe('vertical');
+    expect(list().classList).toContain('w-full');
+    expect(list().classList).toContain('bg-card');
+  });
+
+  it('gives the list an explicit height, which it needs to scroll', async () => {
+    const { host, list } = await renderList();
+    expect(list().getAttribute('style') ?? '').not.toContain('height');
+
+    host.height.set('400px');
+    await waitForUpdate();
+    expect(list().getAttribute('style')).toContain('height: 400px');
   });
 
-  it('emits an explicit height style when the height input is set', async () => {
-    // JIT template bindings don't propagate through input(); flip the signal
-    // directly so listStyle exercises its truthy branch.
-    const { container, componentRef } = await render(UiList);
-    setInputSignal((componentRef.instance as UiList).height, '400px');
+  it('sets the gaps as list styles, which Lynx reads, not attributes', async () => {
+    // jsdom drops style properties it doesn't know, so the gaps never show in
+    // the style attribute: watch what reaches Lynx's inline style API instead.
+    const addInlineStyle = vi.spyOn(lynxMainThread(), '__AddInlineStyle');
+    const { host, list } = await renderList();
+    host.mainAxisGap.set('8px');
+    host.crossAxisGap.set('12px');
     await waitForUpdate();
 
-    const list = container.querySelector('list');
-    expect(list?.getAttribute('style')).toContain('height: 400px');
+    expect(addInlineStyle).toHaveBeenCalledWith(
+      list(),
+      'list-main-axis-gap',
+      '8px',
+    );
+    expect(addInlineStyle).toHaveBeenCalledWith(
+      list(),
+      'list-cross-axis-gap',
+      '12px',
+    );
+    expect(list().getAttribute('list-main-axis-gap')).toBeNull();
+    addInlineStyle.mockRestore();
+  });
+
+  it('hands Lynx real booleans, so the defaults that are on can be turned off', async () => {
+    // A false used to remove the attribute, which leaves Lynx's default: on.
+    const attributes = watchAttributes();
+    const { host } = await renderList();
+    expect(attributes.last('bounces')).toBe(true);
+    expect(attributes.last('scroll-bar-enable')).toBe(true);
+
+    host.bounces.set(false);
+    host.scrollBar.set(false);
+    host.nestedScroll.set(true);
+    host.sticky.set(true);
+    await waitForUpdate();
+    expect(attributes.last('bounces')).toBe(false);
+    expect(attributes.last('scroll-bar-enable')).toBe(false);
+    expect(attributes.last('enable-nested-scroll')).toBe(true);
+    expect(attributes.last('sticky')).toBe(true);
+    attributes.restore();
+  });
+
+  it('emits when scrolled to the start or the end', async () => {
+    const { host, list } = await renderList();
+    fireEvent.scrolltolower(list());
+    fireEvent.scrolltoupper(list());
+    expect(host.reached).toEqual(['end', 'start']);
   });
 });

package/dist/ui/components/list/list.ts

@@ -11,25 +11,24 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-list',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  // `|| undefined` on boolean attributes removes the attribute entirely when
-  // false. Passing the string "false" is treated as truthy by Lynx's native
-  // attribute parser, so absence is the only way to truly turn these off.
+  // The booleans are property bindings to <list>'s inputs, which hand Lynx a
+  // real `false`. They used to be `[attr.x]="x() || undefined"`, which removed
+  // the attribute when false, and a missing attribute means Lynx's default: on,
+  // for `bounces` and `scroll-bar-enable`. So neither could be turned off.
+  // (`[attr.x]` would send the string "false" instead.)
   template: `
     <list
       [attr.list-type]="listType()"
       [attr.span-count]="spanCount()"
       [attr.scroll-orientation]="orientation()"
-      [attr.bounces]="bounces() || undefined"
-      [attr.scroll-bar-enable]="scrollBar() || undefined"
-      [attr.enable-nested-scroll]="nestedScroll() || undefined"
-      [attr.sticky]="sticky() || undefined"
+      [bounces]="bounces()"
+      [scroll-bar-enable]="scrollBar()"
+      [enable-nested-scroll]="nestedScroll()"
+      [sticky]="sticky()"
       [attr.sticky-offset]="stickyOffset()"
       [attr.preload-buffer-count]="preloadBufferCount()"
-      [attr.list-main-axis-gap]="mainAxisGap()"
-      [attr.list-cross-axis-gap]="crossAxisGap()"
       [attr.lower-threshold-item-count]="lowerThresholdItemCount()"
       [attr.upper-threshold-item-count]="upperThresholdItemCount()"
       [class]="listClass()"
@@ -63,9 +62,16 @@ export class UiList {
 
   protected readonly listClass = computed(() => cn('w-full', this.userClass()));
 
-  // Explicit height is required for list to scroll in Lynx
-  protected readonly listStyle = computed(() => {
-    const h = this.height();
-    return h ? `height: ${h};` : '';
-  });
+  // Explicit height is required for list to scroll in Lynx. The gaps go here
+  // too: they're CSS properties that Lynx's list reads from its style, and as
+  // attributes they did nothing.
+  protected readonly listStyle = computed(() =>
+    [
+      this.height() && `height: ${this.height()};`,
+      this.mainAxisGap() && `list-main-axis-gap: ${this.mainAxisGap()};`,
+      this.crossAxisGap() && `list-cross-axis-gap: ${this.crossAxisGap()};`,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 }

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

@@ -0,0 +1,25 @@
+export {
+  UI_MENU,
+  UiMenu,
+  UiMenuItem,
+  UiMenuSection,
+  UiMenuSeparator,
+  UiMenuTrigger,
+  type UiMenuHost,
+} from './menu';
+export {
+  UiMenuPopup,
+  measureMenuElement,
+  type MenuElement,
+  type MenuKind,
+  type MenuPhase,
+} from './menu-popup';
+export {
+  menuStartFrame,
+  placeMenu,
+  type MenuPlacement,
+  type MenuPlacementMode,
+  type MenuPlacementOptions,
+  type MenuRect,
+  type MenuSize,
+} from './menu-placement';