@gloom-sh/terminal 0.18.5 → 0.19.1

package/src/components/chart/composite/composite-chart.tsx

@@ -27,6 +27,7 @@ import { usePaneFocused } from "../../../state/app/activity";
 import { useTabCursorLink } from "../../../state/app/tab-cursor";
 import { useThemeColors, useThemeId } from "../../../theme/theme-context";
 import { themedSeriesColor, themeSeriesColors } from "../../../theme/series-colors";
+import { themeKeysDirection } from "../../../theme/themes";
 import { assignSeriesLineCues } from "./series-cues";
 import { chartSurfaceBackground, usePaneSurface } from "../../layout/pane/surface";
 import { CHART_WATERMARK_ROLE } from "../../../utils/screenshot-watermark";
@@ -210,6 +211,7 @@ function ThemedCompositeChart({
   onChartLayoutChange,
 }: CompositeChartProps & { chartLayout: ChartLayoutPrefs; onChartLayoutChange: ChartLayoutUpdate }) {
   const activeThemeColors = useThemeColors();
+  const keysDirection = themeKeysDirection(useThemeId());
   const { cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1, fractionalViewport = false } = useUiCapabilities();
   const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const showTextFallback = useShowChartTextFallback();
@@ -1034,6 +1036,8 @@ function ThemedCompositeChart({
           visibleSeriesIds={visibleSeriesIds}
           lineCues={lineCues}
           cellPlot={showTextFallback && !isDesktopWeb}
+          // A color-blind safe theme's blue and vermillion are no convention: a candle series keys them.
+          directionDownColor={keysDirection ? resolvedColors.negative : null}
           width={totalWidth}
           accessory={legendAccessory}
           accessoryWidth={legendAccessoryWidth}

package/src/components/chart/composite/interactions.ts

@@ -17,6 +17,9 @@ export type CompositeChartInteraction =
   | "arm-line"
   | "arm-measure"
   | "arm-pencil"
+  | "arm-ray"
+  | "arm-rect"
+  | "arm-fib"
   | "arm-zoom"
   | "cycle-colour"
   | "clear-cursor"
@@ -366,6 +369,9 @@ export function resolveCompositeChartInteraction(event: {
   if (shifted && key === "z") return "arm-zoom";
   if (shifted && key === "d") return "arm-line";
   if (shifted && key === "p") return "arm-pencil";
+  if (shifted && key === "j") return "arm-ray";
+  if (shifted && key === "b") return "arm-rect";
+  if (shifted && key === "f") return "arm-fib";
   if (shifted && key === "h") return "arm-level";
   // Delete is the same act on a keyboard that has the key, or on a Mac with fn.
   if (key === "backspace" || key === "delete") return "delete-drawing";

package/src/components/chart/composite/legend.tsx

@@ -13,7 +13,7 @@ import {
   seriesPriceReference,
 } from "./format";
 import type { CompositeChartProps, CompositeChartScene } from "./types";
-import { seriesCueCssBackground, type SeriesLineCue } from "./series-cues";
+import { DIRECTION_MARKER, seriesColorsDirection, seriesCueCssBackground, type SeriesLineCue } from "./series-cues";
 import { DisclosureMarker } from "../../ui/disclosure-marker";
 
 const LEGEND_WHEEL_DELTA_PER_CELL = 8;
@@ -120,12 +120,35 @@ function packLegendLines(widths: readonly number[], available: number, maxLines
   return lines;
 }
 
-/** The legend's marker for a series on the desktop: its line as the plot strokes it, or a dot. */
-function CompositeSeriesSwatch({ series, cue, filled = true }: {
+/** A triangle pointing up or down, as the desktop legend keys a bar's direction. */
+const DIRECTION_TRIANGLES = {
+  up: "polygon(50% 0, 100% 100%, 0 100%)",
+  down: "polygon(0 0, 100% 0, 50% 100%)",
+} as const;
+
+/** The legend's marker for a series on the desktop: its line as the plot strokes it, its up and down colors, or a dot. */
+function CompositeSeriesSwatch({ series, cue, downColor = null, filled = true }: {
   series: ResolvedSeries;
   cue: SeriesLineCue | null;
+  /** The down color, for a series keyed by direction: an up triangle in its color, then a down one in this. */
+  downColor?: string | null;
   filled?: boolean;
 }) {
+  if (downColor) {
+    return (
+      <Box
+        flexShrink={0}
+        flexDirection="row"
+        style={{ gap: 2, marginInlineEnd: 6, opacity: filled ? 1 : 0.35 }}
+        data-gloom-role="composite-chart-legend-marker"
+        data-gloom-cue="direction"
+      >
+        {([["up", series.color], ["down", downColor]] as const).map(([direction, color]) => (
+          <Box key={direction} flexShrink={0} style={{ width: 7, height: 7, backgroundColor: color, clipPath: DIRECTION_TRIANGLES[direction] }} />
+        ))}
+      </Box>
+    );
+  }
   return cue ? (
     // The line as the plot strokes it: solid, dashed, dotted or heavy.
     <Box
@@ -162,6 +185,7 @@ export function CompositeLegend({
   visibleSeriesIds,
   lineCues = NO_LINE_CUES,
   cellPlot = false,
+  directionDownColor = null,
   width,
   accessory,
   accessoryWidth,
@@ -183,6 +207,12 @@ export function CompositeLegend({
   lineCues?: ReadonlyMap<string, SeriesLineCue>;
   /** The plot is cell text, so a line's cue is its mark rather than its dash. */
   cellPlot?: boolean;
+  /**
+   * The color bars that closed down are drawn in, where the theme's up and
+   * down are not the familiar green and red: a candle series' marker then keys
+   * both (`▲▼`). Null keeps its dot.
+   */
+  directionDownColor?: string | null;
   width: number;
   accessory: CompositeChartProps["legendAccessory"];
   accessoryWidth: CompositeChartProps["legendAccessoryWidth"];
@@ -212,8 +242,9 @@ export function CompositeLegend({
   const valueDates = legendValueDates(series, scene, cursorValueById);
   const buildEntries = (withFiscalPeriods: boolean) => series.map((entry) => {
     const cue = lineCues.get(entry.id) ?? null;
-    const marker = cue ? `${cellPlot ? cue.glyph : cue.sample} ` : DOT_MARKER;
-    const markerWidth = isDesktopWeb ? cue ? DOM_LINE_CELLS : DOM_DOT_CELLS : displayWidth(marker);
+    const downColor = !cue && directionDownColor && seriesColorsDirection(entry) ? directionDownColor : null;
+    const marker = cue ? `${cellPlot ? cue.glyph : cue.sample} ` : downColor ? DIRECTION_MARKER.text : DOT_MARKER;
+    const markerWidth = isDesktopWeb ? cue || downColor ? DOM_LINE_CELLS : DOM_DOT_CELLS : displayWidth(marker);
     const toggleable = !!onToggleSeries && (isSeriesToggleable?.(entry) ?? true);
     const cursorValue = cursorValueById.get(entry.id);
     // A stacked layer reads its own amount, not the top of the stack it is drawn to.
@@ -253,6 +284,7 @@ export function CompositeLegend({
     return {
       entry,
       cue,
+      downColor,
       marker,
       markerWidth,
       label,
@@ -414,7 +446,7 @@ export function CompositeLegend({
     scrollBox.scrollTo({ x: nextLeft, y: scrollBox.scrollTop });
   };
   const renderEntry = (
-    { entry, cue, marker, text, statedUnit, valueTail, toggleable, tooltip, carried, width: entryWidth }: LegendEntry,
+    { entry, cue, downColor, marker, text, statedUnit, valueTail, toggleable, tooltip, carried, width: entryWidth }: LegendEntry,
     index: number,
   ) => {
     const entryVisible = visibleSeriesIds.has(entry.id);
@@ -446,7 +478,13 @@ export function CompositeLegend({
         title={isDesktopWeb ? tooltip : undefined}
       >
         {isDesktopWeb ? (
-          <CompositeSeriesSwatch series={entry} cue={cue} filled={entryVisible} />
+          <CompositeSeriesSwatch series={entry} cue={cue} downColor={downColor} filled={entryVisible} />
+        ) : downColor && entryVisible ? (
+          <Text>
+            <Span fg={entry.color}>{DIRECTION_MARKER.up}</Span>
+            <Span fg={downColor}>{DIRECTION_MARKER.down}</Span>
+            {" "}
+          </Text>
         ) : (
           <Text fg={entryVisible ? entry.color : themeColors.textMuted}>{marker}</Text>
         )}

package/src/components/chart/composite/panel-gestures.ts

@@ -64,6 +64,39 @@ export function startPanGesture(
   };
 }
 
+/** Where the pointer was during a pan, for the speed it lets go at. */
+export interface PanSample {
+  at: number;
+  x: number;
+}
+
+/** Only the last moments of a drag count: a pointer that stopped before letting go throws nothing. */
+const PAN_RELEASE_WINDOW_MS = 100;
+/** How long a throw takes to lose about two thirds of its speed. */
+export const PAN_COAST_DECAY_MS = 325;
+/**
+ * Plot widths per second a release must reach to coast, and below which a
+ * coast stops. Only a flick coasts: a drag placing a bar under the pointer
+ * moves at about one plot width a second and must leave it there.
+ */
+export const PAN_COAST_START_SPEED = 2.5;
+export const PAN_COAST_STOP_SPEED = 0.02;
+
+/** Cells per millisecond the pointer moved over its last samples, 0 when it had come to rest. */
+export function panReleaseVelocity(samples: readonly PanSample[], now: number): number {
+  const recent = samples.filter((sample) => now - sample.at <= PAN_RELEASE_WINDOW_MS);
+  const first = recent[0];
+  const last = recent.at(-1);
+  if (!first || !last || last.at <= first.at) return 0;
+  return (last.x - first.x) / (last.at - first.at);
+}
+
+/** One frame of a coast: the cells it moves (the decaying speed integrated over the frame) and the speed left. */
+export function panCoastStep(velocity: number, elapsedMs: number): { cells: number; velocity: number } {
+  const decay = Math.exp(-Math.max(0, elapsedMs) / PAN_COAST_DECAY_MS);
+  return { cells: velocity * PAN_COAST_DECAY_MS * (1 - decay), velocity: velocity * decay };
+}
+
 export interface PendingWheel {
   /** Fraction of the visible span, positive toward older observations. */
   panRatio: number;

package/src/components/chart/composite/panel-surface.tsx

@@ -69,9 +69,14 @@ import {
   COMPOSITE_PANEL_ROLE,
   isVerticalWheelDirection,
   manualValueAxes,
+  PAN_COAST_START_SPEED,
+  PAN_COAST_STOP_SPEED,
+  panCoastStep,
+  panReleaseVelocity,
   startPanGesture,
   releaseEditableFocus,
   type PanGesture,
+  type PanSample,
   type PendingAxisWheel,
   type PendingWheel,
   type ValueAxisStart,
@@ -733,6 +738,7 @@ export function CompositePanelSurface({
     }
     if (!updateCursor(event)) return;
     const values = manualValueAxes(panel);
+    panSamplesRef.current = [{ at: performance.now(), x: getGlobalMouseX(event, renderer) }];
     dragRef.current = {
       ...startPanGesture(
         frame,
@@ -815,6 +821,8 @@ export function CompositePanelSurface({
       return;
     }
     const globalX = getGlobalMouseX(event, renderer);
+    panSamplesRef.current.push({ at: performance.now(), x: globalX });
+    if (panSamplesRef.current.length > 12) panSamplesRef.current.shift();
     if (drag.frame !== frame) {
       // Data refreshed mid-drag. The new frame maps positions differently, so
       // continue from where the plot is now instead of replaying the drag.
@@ -847,6 +855,43 @@ export function CompositePanelSurface({
     updateCursor,
     viewport,
   ]);
+  // A pan let go while still moving keeps going and slows down, on the
+  // desktop and web only: in a terminal every frame would upload the plot again.
+  const panSamplesRef = useRef<PanSample[]>([]);
+  const coastFrameRef = useRef<number | null>(null);
+  const coastPanRef = useRef(onPanViewport);
+  coastPanRef.current = onPanViewport;
+  const stopCoast = useCallback(() => {
+    if (coastFrameRef.current === null) return;
+    webFrame.cancelAnimationFrame?.(coastFrameRef.current);
+    coastFrameRef.current = null;
+    globalThis.removeEventListener?.("pointerdown", stopCoast, true);
+    globalThis.removeEventListener?.("keydown", stopCoast, true);
+  }, []);
+  const startCoast = useCallback((velocity: number, positionsPerCell: number) => {
+    stopCoast();
+    const requestFrame = webFrame.requestAnimationFrame;
+    const widthCells = Math.max(plotSize.width, 1);
+    const plotWidthsPerSecond = (speed: number) => Math.abs(speed) * 1000 / widthCells;
+    if (!isDesktopWeb || !requestFrame || plotWidthsPerSecond(velocity) < PAN_COAST_START_SPEED) return;
+    if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    let speed = velocity;
+    let last = performance.now();
+    const step = () => {
+      const now = performance.now();
+      const next = panCoastStep(speed, now - last);
+      last = now;
+      speed = next.velocity;
+      coastPanRef.current(next.cells * positionsPerCell);
+      if (plotWidthsPerSecond(speed) < PAN_COAST_STOP_SPEED) stopCoast();
+      else coastFrameRef.current = requestFrame(step);
+    };
+    coastFrameRef.current = requestFrame(step);
+    // Any press or key anywhere, a range button or a reset, takes the view back from the coast.
+    globalThis.addEventListener?.("pointerdown", stopCoast, true);
+    globalThis.addEventListener?.("keydown", stopCoast, true);
+  }, [isDesktopWeb, plotSize.width, stopCoast]);
+  useEffect(() => stopCoast, [stopCoast]);
   const finishToolDrag = useCallback(() => {
     const drag = dragRef.current;
     if (!drag || drag.kind === "pan") return;
@@ -869,12 +914,14 @@ export function CompositePanelSurface({
     if (range) onSetViewport(range);
   }, [drawColor, frame.minimumSpanMs, levels, onDraw, onSetViewport, panel, scene]);
   const resetDrag = useCallback(() => {
-    if (dragRef.current?.kind === "pan") {
+    const drag = dragRef.current;
+    if (drag?.kind === "pan") {
       dragRef.current = null;
+      startCoast(panReleaseVelocity(panSamplesRef.current, performance.now()), drag.positionsPerCell);
       return;
     }
     finishToolDrag();
-  }, [finishToolDrag]);
+  }, [finishToolDrag, startCoast]);
   // Said once per change, so a pointer move costs the chart nothing.
   const reportedDragRef = useRef(false);
   const reportDrag = useCallback((dragging: boolean) => {
@@ -883,10 +930,11 @@ export function CompositePanelSurface({
     onDragActiveChange?.(dragging);
   }, [onDragActiveChange]);
   const pressPlot = useCallback((event: ChartMouseEvent) => {
+    stopCoast();
     const before = dragRef.current;
     startDrag(event);
     if (dragRef.current !== null && dragRef.current !== before) reportDrag(true);
-  }, [reportDrag, startDrag]);
+  }, [reportDrag, startDrag, stopCoast]);
   const releasePlot = useCallback(() => {
     resetDrag();
     reportDrag(false);
@@ -929,6 +977,7 @@ export function CompositePanelSurface({
   const panFromWheel = useCallback((event: ChartMouseEvent) => {
     const scroll = event.scroll;
     if (!scroll) return;
+    stopCoast();
     onActivate?.();
     consumeChartMouseEvent(event);
     const pointer = plotPointer(event);

package/src/components/chart/composite/rasterizer.ts

@@ -436,13 +436,14 @@ function drawColumns(
   domain: CompositeAxisDomain,
   color: RgbaColor,
   negativeColor: RgbaColor,
+  fallColor: RgbaColor,
   layout: CompositeColumnLayout,
   widthByFamily: ReadonlyMap<string, number>,
   opacity: number,
 ): void {
   const baseline = pixelY(0, domain, height) ?? height - 1;
   for (const projected of series.points) {
-    const fill = projected.value < 0 ? negativeColor : color;
+    const fill = projected.value < 0 ? negativeColor : projected.point.fell ? fallColor : color;
     const point = pixelPoint(projected, width, height, domain.manual);
     const geometry = columnPixelGeometry(projected, width, layout, widthByFamily);
     fillRect(
@@ -487,20 +488,27 @@ function drawOhlc(
     const closeY = pixelY(close, domain, height);
     if (highY === null || lowY === null || closeY === null) continue;
     const candleColor = close >= open ? color : negative;
-    drawLine(data, width, height, x, highY, x, lowY, candleColor, 1.1);
-    if (series.source.style === "candles" && openY !== null) {
-      fillRect(
-        data,
-        width,
-        height,
-        x - candleWidth / 2,
-        Math.min(openY, closeY),
-        x + candleWidth / 2,
-        Math.max(openY, closeY) + 1,
-        candleColor,
-      );
+    const style = series.source.style;
+    if (style !== "ohlc" && style !== "hlc" && openY !== null) {
+      const left = x - candleWidth / 2;
+      const right = x + candleWidth / 2;
+      const top = Math.min(openY, closeY);
+      const bottom = Math.max(openY, closeY) + 1;
+      // A hollow rising candle is an outline the wick stops at, as on other terminals.
+      if (style === "hollow" && close >= open) {
+        drawLine(data, width, height, x, highY, x, top, candleColor, 1.1);
+        drawLine(data, width, height, x, bottom, x, lowY, candleColor, 1.1);
+        drawLine(data, width, height, left, top, right, top, candleColor, 1.1);
+        drawLine(data, width, height, left, bottom, right, bottom, candleColor, 1.1);
+        drawLine(data, width, height, left, top, left, bottom, candleColor, 1.1);
+        drawLine(data, width, height, right, top, right, bottom, candleColor, 1.1);
+        continue;
+      }
+      drawLine(data, width, height, x, highY, x, lowY, candleColor, 1.1);
+      fillRect(data, width, height, left, top, right, bottom, candleColor);
       continue;
     }
+    drawLine(data, width, height, x, highY, x, lowY, candleColor, 1.1);
     if (series.source.style === "ohlc" && openY !== null) {
       drawLine(data, width, height, x - candleWidth / 2, openY, x, openY, candleColor, 1.2);
     }
@@ -585,6 +593,7 @@ export function renderCompositePanelBitmap(
           domain,
           color,
           negativeColor,
+          negative,
           columnLayout,
           columnWidthByFamily,
           mixesColumnsWithOtherMarks ? 0.48 : 0.72,
@@ -615,6 +624,8 @@ export function renderCompositePanelBitmap(
         break;
       }
       case "candles":
+      case "hollow":
+      case "heikin-ashi":
       case "ohlc":
       case "hlc":
         drawOhlc(data, width, height, series, domain, color, negative);

package/src/components/chart/composite/scene.ts

@@ -4,7 +4,7 @@ import type {
   ResolvedSeries,
   TimeSeriesPoint,
 } from "../../../time-series/types";
-import { effectiveTimeSeriesPointTime, timeSeriesObservationKey } from "../../../time-series/alignment";
+import { effectiveTimeSeriesPointTime, sortedUniquePoints, timeSeriesObservationKey } from "../../../time-series/alignment";
 import type {
   BuildCompositeChartSceneOptions,
   CompositeAxisDomain,
@@ -36,6 +36,37 @@ function resolveTimeSeriesPointValue(point: TimeSeriesPoint): number | null {
   return null;
 }
 
+/**
+ * Heikin Ashi bars in place of a series' own: each close averages the bar's
+ * four prices and each open sits halfway along the previous Heikin Ashi body,
+ * so the chain runs from the first loaded bar, before any viewport cut. The
+ * real close stays in `rawValue` for the last price marker.
+ */
+export function heikinAshiPoints(points: readonly TimeSeriesPoint[]): TimeSeriesPoint[] {
+  let previous: { open: number; close: number } | null = null;
+  // Chain over the bars the chart draws: one per observation, in time order,
+  // so a superseded copy of a bar never feeds the next open.
+  return sortedUniquePoints(points).map((point) => {
+    const close = point.close ?? point.value;
+    if (!isFiniteNumber(close)) return point;
+    const open = isFiniteNumber(point.open) ? point.open : close;
+    const high = isFiniteNumber(point.high) ? point.high : Math.max(open, close);
+    const low = isFiniteNumber(point.low) ? point.low : Math.min(open, close);
+    const haClose = (open + high + low + close) / 4;
+    const haOpen = previous ? (previous.open + previous.close) / 2 : (open + close) / 2;
+    previous = { open: haOpen, close: haClose };
+    return {
+      ...point,
+      value: haClose,
+      rawValue: close,
+      open: haOpen,
+      high: Math.max(high, haOpen, haClose),
+      low: Math.min(low, haOpen, haClose),
+      close: haClose,
+    };
+  });
+}
+
 function pointTime(point: TimeSeriesPoint): number | null {
   const time = point.date instanceof Date ? point.date.getTime() : new Date(point.date).getTime();
   return Number.isFinite(time) ? time : null;
@@ -502,9 +533,11 @@ function primaryPriceSeries(series: readonly ResolvedSeries[]): ResolvedSeries |
   )) ?? null;
 }
 
-function lastCloseOf(points: readonly CompositeProjectedPoint[]): number | null {
+function lastCloseOf(points: readonly CompositeProjectedPoint[], heikinAshi = false): number | null {
   const last = points.at(-1);
   if (!last) return null;
+  // A Heikin Ashi close is an average; the marker names the price that traded.
+  if (heikinAshi && isFiniteNumber(last.point.rawValue)) return last.point.rawValue;
   return isFiniteNumber(last.point.close) ? last.point.close : last.value;
 }
 
@@ -522,7 +555,7 @@ function attachLastPriceMarker(
   // A rejected or missing latest bar cannot make an older close current.
   const latest = normalizedSourcePoints(primary).at(-1);
   if (latest?.point.provenance?.priceHistoryIntegrity || latest?.value === null) return;
-  const value = lastCloseOf(projected.points);
+  const value = lastCloseOf(projected.points, primary.style === "heikin-ashi");
   if (value === null) return;
   const yRatio = projectCompositeValue(value, domain);
   // An axis scaled by hand can leave the last close off the panel.
@@ -764,7 +797,9 @@ export function buildCompositeChartScene(
   panels: ChartPanelSpec[],
   options: BuildCompositeChartSceneOptions,
 ): CompositeChartScene | null {
-  const dataSeries = series.filter((entry) => normalizedPoints(entry).length > 0);
+  const dataSeries = series
+    .map((entry) => entry.style === "heikin-ashi" ? { ...entry, points: heikinAshiPoints(entry.points) } : entry)
+    .filter((entry) => normalizedPoints(entry).length > 0);
   if (dataSeries.length === 0) return null;
 
   // A known missing observation owns a date even though it has no drawable

package/src/components/chart/composite/series-cues.ts

@@ -69,3 +69,17 @@ export function seriesCueCssBackground(cue: SeriesLineCue, color: string): strin
   });
   return `repeating-linear-gradient(to right, ${stops.join(", ")})`;
 }
+
+/** The OHLC family: one series drawn in the up color for a bar that closed up and the down color for one that closed down. */
+const DIRECTION_STYLES = new Set<SeriesStyle>(["candles", "ohlc", "hlc"]);
+
+/**
+ * Whether a series colors each bar by its direction, so its legend entry can
+ * key the two colors (`▲▼`) where the theme's are not the familiar green and red.
+ */
+export function seriesColorsDirection(series: Pick<ResolvedSeries, "style">): boolean {
+  return DIRECTION_STYLES.has(series.style);
+}
+
+/** The legend marker that keys up and down: the up color's triangle, then the down color's. */
+export const DIRECTION_MARKER = { up: "▲", down: "▼", text: "▲▼ " } as const;

package/src/components/chart/composite/text-renderer.ts

@@ -248,11 +248,16 @@ function renderOhlc(
     const lowRow = valueRow(low, domain, height);
     if (closeRow === null || highRow === null || lowRow === null) continue;
     drawRowsLine(rows, x, highRow, x, lowRow, "│");
-    if (series.source.style === "candles" && openRow !== null) {
+    const style = series.source.style;
+    if (style !== "ohlc" && style !== "hlc" && openRow !== null) {
       const [bodyTop, bodyBottom] = rowSpan(openRow, closeRow, height);
+      // A hollow rising body keeps its edges; one cell wide it is the wick alone.
+      const hollow = style === "hollow" && close >= open;
       for (let row = bodyTop; row <= bodyBottom; row += 1) {
         for (let offset = -halfCandleWidth; offset <= halfCandleWidth; offset += 1) {
-          setCell(rows, x + offset, row, "█");
+          const side = Math.abs(offset) === halfCandleWidth;
+          const rim = row === bodyTop || row === bodyBottom;
+          setCell(rows, x + offset, row, !hollow ? "█" : side ? "│" : rim ? "─" : " ");
         }
       }
       continue;
@@ -313,6 +318,8 @@ export function renderCompositePanelText(
         renderBand(rows, series, domain, plotWidth, height, cue);
         break;
       case "candles":
+      case "hollow":
+      case "heikin-ashi":
       case "ohlc":
       case "hlc":
         renderOhlc(rows, series, domain, plotWidth, height);

package/src/components/chart/composite/tool-catalog.ts

@@ -5,6 +5,9 @@ const RULER_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 const PEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.4 13.6 4 9.9 10.6 3.3a1.6 1.6 0 0 1 2.3 0l0 0a1.6 1.6 0 0 1 0 2.3L6.2 12 2.4 13.6Z" fill="none" stroke="#000" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
 const LINE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.2 12.8 12.8 3.2" stroke="#000" stroke-width="1.6" stroke-linecap="round"/><circle cx="3.2" cy="12.8" r="2" fill="none" stroke="#000" stroke-width="1.4"/><circle cx="12.8" cy="3.2" r="2" fill="none" stroke="#000" stroke-width="1.4"/></svg>`;
 const LEVEL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1.6 8h4.2M10.2 8h4.2" stroke="#000" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="8" r="2.2" fill="none" stroke="#000" stroke-width="1.4"/></svg>`;
+const RAY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="3.4" cy="8" r="2" fill="none" stroke="#000" stroke-width="1.4"/><path d="M5.4 8h9" stroke="#000" stroke-width="1.6" stroke-linecap="round"/></svg>`;
+const RECT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="2.2" y="3.6" width="11.6" height="8.8" rx="0.8" fill="#000" fill-opacity="0.18" stroke="#000" stroke-width="1.4"/></svg>`;
+const FIB_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 3h12M2 6.4h12M2 9h12M2 13h12" stroke="#000" stroke-width="1.3" stroke-linecap="round"/></svg>`;
 const MARQUEE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.2 6V3.4a1.2 1.2 0 0 1 1.2-1.2H6M10 2.2h2.6a1.2 1.2 0 0 1 1.2 1.2V6M13.8 10v2.6a1.2 1.2 0 0 1-1.2 1.2H10M6 13.8H3.4a1.2 1.2 0 0 1-1.2-1.2V10" fill="none" stroke="#000" stroke-width="1.7" stroke-linecap="round"/></svg>`;
 
 export const CHART_TOOLS: ReadonlyArray<{
@@ -56,6 +59,30 @@ export const CHART_TOOLS: ReadonlyArray<{
     glyph: "\u223f",
     icon: PEN_ICON,
   },
+  {
+    kind: "ray",
+    label: "Horizontal ray",
+    shortcut: "Shift+J",
+    hint: "Click a price to run a line from it to the right edge, Backspace deletes",
+    glyph: "\u21a6",
+    icon: RAY_ICON,
+  },
+  {
+    kind: "rect",
+    label: "Rectangle",
+    shortcut: "Shift+B",
+    hint: "Drag a box over a range, grab a corner to reshape it, Backspace deletes",
+    glyph: "\u25ad",
+    icon: RECT_ICON,
+  },
+  {
+    kind: "fib",
+    label: "Fib retracement",
+    shortcut: "Shift+F",
+    hint: "Drag from a swing to its end for the 23.6 to 78.6% levels, Backspace deletes",
+    glyph: "\u2261",
+    icon: FIB_ICON,
+  },
   {
     kind: "level",
     label: "Price level",
@@ -72,6 +99,9 @@ export const CHART_TOOL_MENU: ReadonlyArray<{ kind: ChartToolKind; label: string
   { kind: "zoom", label: "Zoom to Range", accelerator: "Shift+Z" },
   { kind: "line", label: "Trend Line", accelerator: "Shift+D" },
   { kind: "pencil", label: "Freehand", accelerator: "Shift+P" },
+  { kind: "ray", label: "Horizontal Ray", accelerator: "Shift+J" },
+  { kind: "rect", label: "Rectangle", accelerator: "Shift+B" },
+  { kind: "fib", label: "Fib Retracement", accelerator: "Shift+F" },
   { kind: "level", label: "Price Level", accelerator: "Shift+H" },
 ];
 
@@ -86,6 +116,9 @@ export const KEYBOARD_TOOL_HINTS: Record<ChartToolKind, {
   zoom: { start: "select", startTitle: "Select Range", finish: "zoom", finishTitle: "Zoom to Range" },
   line: { start: "draw", startTitle: "Draw Line", finish: "place", finishTitle: "Place Line" },
   pencil: { start: "draw", startTitle: "Draw Freehand", finish: "place", finishTitle: "Place Drawing" },
+  ray: { start: "draw", startTitle: "Draw Ray", finish: "place", finishTitle: "Place Ray" },
+  rect: { start: "draw", startTitle: "Draw Rectangle", finish: "place", finishTitle: "Place Rectangle" },
+  fib: { start: "draw", startTitle: "Draw Retracement", finish: "place", finishTitle: "Place Retracement" },
   level: { start: "add level", startTitle: "Add Level", finish: "add level", finishTitle: "Add Level" },
 };
 
@@ -94,5 +127,8 @@ export const ARMED_TOOL_BY_INTERACTION = {
   "arm-zoom": "zoom",
   "arm-line": "line",
   "arm-pencil": "pencil",
+  "arm-ray": "ray",
+  "arm-rect": "rect",
+  "arm-fib": "fib",
   "arm-level": "level",
 } as const satisfies Record<string, ChartToolKind>;