gloomberb 0.18.3 → 0.18.4

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

@@ -26,6 +26,7 @@ import { isFiniteNumber } from "../../../utils/guards";
 import { volumeProfile } from "../../../time-series/trader-studies";
 import { extendedHoursSpans, isIntradaySeries } from "./session-shading";
 import { listingTimeZone } from "../../../market-data/market/trading-sessions";
+import { manualValueRangeApplies, valueScaleKey, valueScaleSlot, type CompositeManualValueScale } from "./value-scale";
 
 const DAY_MS = 24 * 60 * 60 * 1000;
 
@@ -328,11 +329,19 @@ function buildAxisDomain(
   series: ResolvedSeries[],
   scale: PanelScale,
   rows: number,
+  manualScale?: CompositeManualValueScale,
 ): CompositeAxisDomain | undefined {
   const axisSeries = series.filter((entry) => entry.axis === side);
   if (axisSeries.length === 0) return undefined;
   const values = axisSeries.flatMap(seriesDomainValues);
-  const { min, max } = paddedDomain([...values, ...priorCloseInReach(axisSeries, values)], scale);
+  const fitted = paddedDomain([...values, ...priorCloseInReach(axisSeries, values)], scale);
+  const scaleKey = valueScaleKey(scale, axisSeries);
+  // A range set by hand holds while the axis plots the same series and some
+  // of their data is in it; otherwise the axis fits the data again.
+  const manual = manualScale && manualScale.key === scaleKey && manualValueRangeApplies(manualScale, fitted, scale)
+    ? manualScale
+    : null;
+  const { min, max } = manual ?? fitted;
   const first = axisSeries[0]!;
   return {
     side,
@@ -346,6 +355,8 @@ function buildAxisDomain(
     seriesIds: axisSeries.map((entry) => entry.id),
     maxTicks: compositeAxisMaxTicks(rows),
     tickRows: rows,
+    scaleKey,
+    ...(manual ? { manual: true } : {}),
   };
 }
 
@@ -510,7 +521,8 @@ function attachLastPriceMarker(
   const value = lastCloseOf(projected.points);
   if (value === null) return;
   const yRatio = projectCompositeValue(value, domain);
-  if (yRatio === null) return;
+  // An axis scaled by hand can leave the last close off the panel.
+  if (yRatio === null || (domain.manual && (yRatio < 0 || yRatio > 1))) return;
   panel.lastPrice = {
     seriesId: primary.id,
     color: primary.color,
@@ -837,8 +849,8 @@ export function buildCompositeChartScene(
       ? dataSeries.filter((entry) => entry.panelId === panel.id)
       : panelSeries;
     const rows = panelHeights.get(panel.id) ?? 1;
-    const left = buildAxisDomain("left", domainSeries, scale, rows);
-    const right = buildAxisDomain("right", domainSeries, scale, rows);
+    const left = buildAxisDomain("left", domainSeries, scale, rows, options.valueScales?.[valueScaleSlot(panel.id, "left")]);
+    const right = buildAxisDomain("right", domainSeries, scale, rows, options.valueScales?.[valueScaleSlot(panel.id, "right")]);
     const axes: Partial<Record<CompositeAxisSide, CompositeAxisDomain>> = { left, right };
     return {
       id: panel.id,

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

@@ -13,6 +13,7 @@ import type {
   CompositeProjectedSeries,
 } from "./types";
 import { clamp } from "../../../utils/math";
+import { clipSegmentToBand } from "./value-scale";
 
 function setCell(rows: string[][], x: number, y: number, value: string): void {
   const row = rows[y];
@@ -43,16 +44,40 @@ function drawLine(rows: string[][], x0: number, y0: number, x1: number, y1: numb
   }
 }
 
-function cellPoint(point: CompositeProjectedPoint, width: number, height: number): { x: number; y: number } {
+/**
+ * The cell a point falls in. An axis scaled by hand can put it past the top or
+ * bottom row, where `keepY` leaves it for the drawing to clip.
+ */
+function cellPoint(point: CompositeProjectedPoint, width: number, height: number, keepY = false): { x: number; y: number } {
+  const y = Math.round(point.yRatio * Math.max(height - 1, 0));
   return {
     x: clamp(Math.round(point.xRatio * Math.max(width - 1, 0)), 0, Math.max(width - 1, 0)),
-    y: clamp(Math.round(point.yRatio * Math.max(height - 1, 0)), 0, Math.max(height - 1, 0)),
+    y: keepY ? y : clamp(y, 0, Math.max(height - 1, 0)),
   };
 }
 
 function valueRow(value: number, domain: CompositeAxisDomain, height: number): number | null {
   const ratio = projectCompositeValue(value, domain);
-  return ratio === null ? null : clamp(Math.round(ratio * Math.max(height - 1, 0)), 0, Math.max(height - 1, 0));
+  if (ratio === null) return null;
+  const row = Math.round(ratio * Math.max(height - 1, 0));
+  return domain.manual ? row : clamp(row, 0, Math.max(height - 1, 0));
+}
+
+/** A line between two cells, the part outside the rows (a hand-scaled axis) left off. */
+function drawRowsLine(rows: string[][], x0: number, y0: number, x1: number, y1: number, mark: string): void {
+  const last = rows.length - 1;
+  if (y0 >= 0 && y0 <= last && y1 >= 0 && y1 <= last) {
+    drawLine(rows, x0, y0, x1, y1, mark);
+    return;
+  }
+  const clipped = clipSegmentToBand(x0, y0, x1, y1, -0.49, last + 0.49);
+  if (!clipped) return;
+  drawLine(rows, Math.round(clipped[0]), Math.round(clipped[1]), Math.round(clipped[2]), Math.round(clipped[3]), mark);
+}
+
+/** Rows from `from` to `to`, both ends kept to the rows there are. */
+function rowSpan(from: number, to: number, height: number): [number, number] {
+  return [Math.max(0, Math.min(from, to)), Math.min(height - 1, Math.max(from, to))];
 }
 
 function renderLineLike(
@@ -61,8 +86,9 @@ function renderLineLike(
   width: number,
   height: number,
   cue?: SeriesLineCue,
+  keepY = false,
 ): void {
-  const points = series.points.map((point) => ({ ...cellPoint(point, width, height), point }));
+  const points = series.points.map((point) => ({ ...cellPoint(point, width, height, keepY), point }));
   if (points.length === 0) return;
   const step = series.source.style === "step" || series.source.interpolation === "step-after";
   // Beside other lines, each line keeps its own mark the whole way, steps
@@ -73,10 +99,10 @@ function renderLineLike(
     const current = points[index]!;
     if (current.point.breakBefore) continue;
     if (step) {
-      drawLine(rows, previous.x, previous.y, current.x, previous.y, mark ?? "─");
-      drawLine(rows, current.x, previous.y, current.x, current.y, mark ?? "│");
+      drawRowsLine(rows, previous.x, previous.y, current.x, previous.y, mark ?? "─");
+      drawRowsLine(rows, current.x, previous.y, current.x, current.y, mark ?? "│");
     } else {
-      drawLine(rows, previous.x, previous.y, current.x, current.y, mark ?? "•");
+      drawRowsLine(rows, previous.x, previous.y, current.x, current.y, mark ?? "•");
     }
   }
   for (let index = 0; index < points.length; index += 1) {
@@ -94,9 +120,10 @@ function renderPoints(
   series: CompositeProjectedSeries,
   width: number,
   height: number,
+  keepY: boolean,
 ): void {
   for (const point of series.points) {
-    const cell = cellPoint(point, width, height);
+    const cell = cellPoint(point, width, height, keepY);
     setCell(rows, cell.x, cell.y, "●");
   }
 }
@@ -109,14 +136,14 @@ function renderArea(
   height: number,
   cue?: SeriesLineCue,
 ): void {
+  const keepY = domain.manual === true;
   const baseline = valueRow(0, domain, height) ?? height - 1;
-  const points = series.points.map((point) => cellPoint(point, width, height));
+  const points = series.points.map((point) => cellPoint(point, width, height, keepY));
   for (const point of points) {
-    const top = Math.min(point.y, baseline);
-    const bottom = Math.max(point.y, baseline);
+    const [top, bottom] = rowSpan(point.y, baseline, height);
     for (let row = top; row <= bottom; row += 1) setCell(rows, point.x, row, "░");
   }
-  renderLineLike(rows, series, width, height, cue);
+  renderLineLike(rows, series, width, height, cue, keepY);
 }
 
 /** A band's range as shade between its points' low and high rows, under its line. */
@@ -138,7 +165,7 @@ function renderBand(
       : { x: cellPoint(projected, width, height).x, top: Math.min(top, bottom), bottom: Math.max(top, bottom) };
   });
   const shade = (x: number, top: number, bottom: number) => {
-    for (let row = Math.round(top); row <= Math.round(bottom); row += 1) {
+    for (let row = Math.max(0, Math.round(top)); row <= Math.min(height - 1, Math.round(bottom)); row += 1) {
       const current = rows[row]?.[x];
       if (current === " " || current === "·") setCell(rows, x, row, "░");
     }
@@ -157,7 +184,7 @@ function renderBand(
       shade(x, previous.top + (current.top - previous.top) * t, previous.bottom + (current.bottom - previous.bottom) * t);
     }
   }
-  renderLineLike(rows, series, width, height, cue);
+  renderLineLike(rows, series, width, height, cue, domain.manual === true);
 }
 
 function renderColumns(
@@ -170,7 +197,7 @@ function renderColumns(
 ): void {
   const baseline = valueRow(0, domain, height) ?? height - 1;
   for (const point of series.points) {
-    const cell = cellPoint(point, width, height);
+    const cell = cellPoint(point, width, height, domain.manual);
     const group = layout.groupByPoint.get(point) ?? {
       index: 0,
       count: 1,
@@ -194,8 +221,7 @@ function renderColumns(
         : Math.round(group.index * (groupWidth - 1) / (group.count - 1));
       cell.x = groupStart + slot;
     }
-    const top = Math.min(cell.y, baseline);
-    const bottom = Math.max(cell.y, baseline);
+    const [top, bottom] = rowSpan(cell.y, baseline, height);
     for (let row = top; row <= bottom; row += 1) setCell(rows, cell.x, row, "█");
   }
 }
@@ -221,9 +247,10 @@ function renderOhlc(
     const highRow = valueRow(high, domain, height);
     const lowRow = valueRow(low, domain, height);
     if (closeRow === null || highRow === null || lowRow === null) continue;
-    drawLine(rows, x, highRow, x, lowRow, "│");
+    drawRowsLine(rows, x, highRow, x, lowRow, "│");
     if (series.source.style === "candles" && openRow !== null) {
-      for (let row = Math.min(openRow, closeRow); row <= Math.max(openRow, closeRow); row += 1) {
+      const [bodyTop, bodyBottom] = rowSpan(openRow, closeRow, height);
+      for (let row = bodyTop; row <= bodyBottom; row += 1) {
         for (let offset = -halfCandleWidth; offset <= halfCandleWidth; offset += 1) {
           setCell(rows, x + offset, row, "█");
         }
@@ -292,10 +319,10 @@ export function renderCompositePanelText(
         break;
       case "line":
       case "step":
-        renderLineLike(rows, series, plotWidth, height, cue);
+        renderLineLike(rows, series, plotWidth, height, cue, domain.manual === true);
         break;
       case "points":
-        renderPoints(rows, series, plotWidth, height);
+        renderPoints(rows, series, plotWidth, height, domain.manual === true);
         break;
     }
   }

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

@@ -7,18 +7,35 @@ import { CHART_TOOLS } from "./tool-catalog";
 /** Icon cells plus the gap between chips. */
 export const CHART_TOOLBAR_WIDTH = CHART_TOOLS.length * 3 + (CHART_TOOLS.length - 1);
 
+/** The bar's own button that folds it away, and the one it folds to. */
+const FOLD_BUTTON = {
+  label: "Hide drawing tools (Shift+T)",
+  glyph: "\u2039",
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10 3.5 5.5 8l4.5 4.5" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+};
+const UNFOLD_BUTTON = {
+  label: "Show drawing tools (Shift+T)",
+  glyph: "\u203a",
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+};
+
 function ChartToolButton({
   tool,
   active,
   isDesktopWeb,
   onPress,
+  role = "composite-chart-tool",
+  reveal,
 }: {
-  tool: (typeof CHART_TOOLS)[number];
+  tool: { label: string; glyph: string; icon: string; shortcut?: string; hint?: string };
   active: boolean;
   isDesktopWeb: boolean;
   onPress: () => void;
+  role?: string;
+  /** Drawn only while the pointer is over the bar (desktop and web). */
+  reveal?: boolean;
 }) {
-  const label = `${tool.label} (${tool.shortcut}). ${tool.hint}`;
+  const label = tool.shortcut ? `${tool.label} (${tool.shortcut}). ${tool.hint}` : tool.label;
   const color = active ? themeColors.text : themeColors.textDim;
   return (
     <Box
@@ -36,8 +53,9 @@ function ChartToolButton({
       }}
       cursor="pointer"
       data-gloom-interactive="true"
-      data-gloom-role="composite-chart-tool"
+      data-gloom-role={role}
       data-gloom-label={label}
+      data-gloom-reveal={reveal ? "hover" : undefined}
       data-active={active ? "true" : "false"}
       title={isDesktopWeb ? label : undefined}
       // A tool is a toggle button: the icon button family, pressed while it is the chart's tool.
@@ -130,6 +148,8 @@ export function ChartToolbar({
   drawColor,
   showColors,
   levelTool,
+  folded,
+  onToggleFolded,
   onArmTool,
   onPickColor,
 }: {
@@ -141,6 +161,10 @@ export function ChartToolbar({
   showColors: boolean;
   /** The chart's levels can be edited here. */
   levelTool: boolean;
+  /** Hidden by the user: the bar is the one button that brings it back. */
+  folded: boolean;
+  /** Folds the bar away, from the button it shows under the pointer, or opens it again. */
+  onToggleFolded: () => void;
   onArmTool: (tool: ChartToolKind | null) => void;
   onPickColor: (color: string) => void;
 }) {
@@ -166,8 +190,19 @@ export function ChartToolbar({
         }
         : undefined}
       data-gloom-role="composite-chart-toolbar"
+      data-gloom-reveal-scope="true"
+      data-folded={folded ? "true" : undefined}
     >
-      {CHART_TOOLS.filter((tool) => levelTool || tool.kind !== "level").map((tool) => (
+      {folded ? (
+        <ChartToolButton
+          tool={UNFOLD_BUTTON}
+          active={false}
+          isDesktopWeb={isDesktopWeb}
+          onPress={onToggleFolded}
+          role="composite-chart-toolbar-toggle"
+        />
+      ) : null}
+      {folded ? null : CHART_TOOLS.filter((tool) => levelTool || tool.kind !== "level").map((tool) => (
         <ChartToolButton
           key={tool.kind ?? "pan"}
           tool={tool}
@@ -177,7 +212,7 @@ export function ChartToolbar({
         />
       ))}
       {/* Colours only take space while something can use them. */}
-      {showColors ? CHART_DRAWING_COLORS.map((color) => (
+      {!folded && showColors ? CHART_DRAWING_COLORS.map((color) => (
         <ChartColorSwatch
           key={color}
           color={color}
@@ -186,6 +221,18 @@ export function ChartToolbar({
           onPress={() => onPickColor(color)}
         />
       )) : null}
+      {/* The way to fold the bar shows under the pointer, so a chart at rest
+          draws the bar as it always has; the terminal has Shift+T and the menu. */}
+      {!folded && isDesktopWeb ? (
+        <ChartToolButton
+          tool={FOLD_BUTTON}
+          active={false}
+          isDesktopWeb={isDesktopWeb}
+          onPress={onToggleFolded}
+          role="composite-chart-toolbar-toggle"
+          reveal
+        />
+      ) : null}
     </Box>
   );
 }

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { CompositeChartLevels } from "./levels";
 import type { SeriesLineCue } from "./series-cues";
+import type { CompositeValueScales } from "./value-scale";
 import type {
   ChartPanelSpec,
   PanelScale,
@@ -38,6 +39,10 @@ export interface CompositeAxisDomain {
   /** Rows the labels snap to, one per row, in the terminal. Unset where labels
    * sit at their exact heights. */
   tickRows?: number;
+  /** What the axis plots, which a range set by hand holds to (see `valueScaleKey`). */
+  scaleKey?: string;
+  /** The range was stretched or squeezed by hand instead of fitted to the data. */
+  manual?: boolean;
 }
 
 export interface CompositeProjectedPoint {
@@ -203,6 +208,8 @@ export interface BuildCompositeChartSceneOptions {
    * is not time, where the last observation belongs at the right edge.
    */
   rightOffsetRatio?: number;
+  /** Value axes stretched or squeezed by hand, in place of fitting them to the data. */
+  valueScales?: CompositeValueScales;
 }
 
 export interface CompositeChartXMarker {
@@ -329,6 +336,12 @@ export interface CompositeChartProps {
    * Enter hint, such as "anchor here".
    */
   timePick?: { label: string; onPick: (date: Date) => void; onCancel: () => void } | null;
+  /**
+   * Picks a price on the levels' series instead of panning: a press on its
+   * plot hands back the price under the pointer, Enter the price at the
+   * keyboard cursor; Esc cancels. `label` is the Enter hint, such as "set limit".
+   */
+  pricePick?: { label: string; onPick: (value: number) => void; onCancel: () => void } | null;
   /**
    * Horizontal price levels on one series' panel. With `onEdit` the level
    * tool (Shift+H) adds, moves and deletes them by mouse and keyboard.

package/src/components/chart/composite/use-composite-chart-keyboard.ts

@@ -59,6 +59,31 @@ export interface KeyboardToolDrag {
   end: ChartDrawingPoint;
 }
 
+/** The chart's own layout: its tool bar, its legend and its panels' heights. */
+export interface CompositeChartLayoutControls {
+  /** The bar is saved hidden; it still opens while a tool is in hand. */
+  toolbarHidden: boolean;
+  toggleToolbar: () => void;
+  /** The legend has more than one series, so it can fold to its first. */
+  legendCollapsible: boolean;
+  legendCollapsed: boolean;
+  toggleLegend: () => void;
+  /** Two or more panels share the plot, so the keys can move the line between them. */
+  panelsResizable: boolean;
+  stepTopPanel: (direction: 1 | -1) => void;
+  /** Heights were set by hand. */
+  panelHeightsSet: boolean;
+  resetPanelHeights: () => void;
+  /** A panel has the whole plot. */
+  panelMaximized: boolean;
+  restorePanels: () => void;
+}
+
+/** Shift with one of the arrows, and no other modifier. */
+function isShiftedArrow(event: { name?: string; shift?: boolean; ctrl?: boolean; meta?: boolean; alt?: boolean }, ...names: string[]): boolean {
+  return event.shift === true && !event.ctrl && !event.meta && !event.alt && names.includes(event.name ?? "");
+}
+
 /** Shift and a letter, whether or not the terminal reports the shift itself. */
 function isShiftedLetter(event: { name?: string; shift?: boolean; ctrl?: boolean; meta?: boolean; alt?: boolean }, letter: string): boolean {
   if (event.ctrl || event.meta || event.alt) return false;
@@ -76,6 +101,7 @@ export function useCompositeChartKeyboard({
   pin,
   onActivate,
   timePick,
+  pricePick,
   levels,
   visibleLegendSeries,
   visibleSeriesIds,
@@ -83,6 +109,7 @@ export function useCompositeChartKeyboard({
   isSeriesToggleable,
   navigationFrame,
   activeUserViewport,
+  scaledByHand,
   panViewportByRatio,
   zoomViewport,
   setViewportRange,
@@ -94,6 +121,7 @@ export function useCompositeChartKeyboard({
   addDrawing,
   removeDrawing,
   pickDrawColor,
+  layout,
 }: {
   focused: boolean;
   interactive: boolean;
@@ -106,6 +134,7 @@ export function useCompositeChartKeyboard({
   pin: { pinned: boolean; toggle: () => void } | null;
   onActivate: CompositeChartProps["onActivate"];
   timePick: CompositeChartProps["timePick"];
+  pricePick: CompositeChartProps["pricePick"];
   levels: CompositeChartProps["levels"];
   visibleLegendSeries: ResolvedSeries[];
   visibleSeriesIds: ReadonlySet<string>;
@@ -113,6 +142,8 @@ export function useCompositeChartKeyboard({
   isSeriesToggleable: CompositeChartProps["isSeriesToggleable"];
   navigationFrame: CompositeNavigationFrame | null;
   activeUserViewport: CompositeViewportRange | null;
+  /** A value axis was stretched or squeezed by hand, which `resetViewport` also fits again. */
+  scaledByHand: boolean;
   panViewportByRatio: (shiftRatio: number) => void;
   zoomViewport: (zoomFactor: number, anchorRatio?: number) => void;
   setViewportRange: (range: CompositeViewportRange) => void;
@@ -124,6 +155,7 @@ export function useCompositeChartKeyboard({
   addDrawing: (drawing: ChartDrawing) => void;
   removeDrawing: () => void;
   pickDrawColor: (color: string) => void;
+  layout: CompositeChartLayoutControls;
 }) {
   const [legendKeyboardIndex, setLegendKeyboardIndex] = useState<number | null>(null);
   const [armedTool, setArmedTool] = useState<ChartToolKind | null>(null);
@@ -187,8 +219,8 @@ export function useCompositeChartKeyboard({
     if (wasFocusedRef.current && !focused) setEntered(false);
     wasFocusedRef.current = focused;
   }, [focused]);
-  // A time is picked with the arrows and Enter.
-  const picking = !!timePick;
+  // A time or a price is picked with the arrows and Enter.
+  const picking = !!timePick || !!pricePick;
   useEffect(() => {
     if (picking) setEntered(true);
   }, [picking]);
@@ -287,6 +319,8 @@ export function useCompositeChartKeyboard({
   };
   const stepLegend = (direction: -1 | 1) => {
     onActivate?.();
+    // The series stepped to must be on screen.
+    if (layout.legendCollapsed) layout.toggleLegend();
     setLegendKeyboardIndex((current) => (
       current === null
         ? direction > 0 ? 0 : visibleLegendSeries.length - 1
@@ -298,9 +332,9 @@ export function useCompositeChartKeyboard({
     onActivate?.();
     onToggleSeries?.(legendEntry.id);
   };
-  /** A level at the keyboard cursor's price, or the last price without a cursor. */
-  const addLevelAtCursor = () => {
-    if (!levels?.onEdit || !levelHost || !scene) return;
+  /** The levels' series price at the keyboard cursor, or the last price without a cursor. */
+  const priceAtCursor = (): number | null => {
+    if (!levels || !levelHost || !scene) return null;
     const { panel, domain } = levelHost;
     const date = keyboardCursorDateRef.current ?? scene.dates.at(-1) ?? null;
     // The levels' own series, not whichever one the panel lists first.
@@ -308,8 +342,13 @@ export function useCompositeChartKeyboard({
     const value = (date ? resolveMeasureValueAt(pricePanel, date.getTime()) : null)
       ?? (panel.lastPrice?.seriesId === levels.seriesId ? panel.lastPrice.value : null)
       ?? unprojectCompositeValue(0.5, domain);
-    if (value === null) return;
-    const rounded = roundLevelValue(value, domain);
+    return value === null ? null : roundLevelValue(value, domain);
+  };
+  /** A level at the keyboard cursor's price, or the last price without a cursor. */
+  const addLevelAtCursor = () => {
+    if (!levels?.onEdit) return;
+    const rounded = priceAtCursor();
+    if (rounded === null) return;
     onActivate?.();
     // Enter again at the same cursor picks the level already there.
     const existing = levelItems.find((level) => level.editable && level.value === rounded);
@@ -342,7 +381,8 @@ export function useCompositeChartKeyboard({
     setSelectedLevelId(ordered[next]!.id);
   };
   const removeSelectedLevel = () => {
-    if (!selectedLevel?.editable) return;
+    // An order's line moves here; it is cancelled where the order is.
+    if (!selectedLevel?.editable || selectedLevel.draggable) return;
     levels?.onEdit?.({ kind: "remove", id: selectedLevel.id });
     setSelectedLevelId(null);
   };
@@ -403,6 +443,13 @@ export function useCompositeChartKeyboard({
       else chartActionsRef.current.pick();
       return;
     }
+    // Esc ends a price pick even with nothing drawn yet; Enter needs a price at the cursor.
+    if (pricePick && (scene || isPlainKey(event, "escape")) && isPlainKey(event, "return", "enter", "escape")) {
+      consume();
+      if (event.name === "escape") pricePick.onCancel();
+      else chartActionsRef.current.pickPrice();
+      return;
+    }
     if (zoned && !entered && isPlainKey(event, "down", "return", "enter")) {
       consume();
       enterChart();
@@ -424,7 +471,7 @@ export function useCompositeChartKeyboard({
       stepLevel(event.name === "[" ? -1 : 1);
       return;
     }
-    if (toolsActive && selectedLevel?.editable && levelsEditable && isPlainKey(event, "backspace", "delete")) {
+    if (toolsActive && selectedLevel?.editable && !selectedLevel.draggable && levelsEditable && isPlainKey(event, "backspace", "delete")) {
       consume();
       removeSelectedLevel();
       return;
@@ -453,6 +500,21 @@ export function useCompositeChartKeyboard({
       setKeyboardPlacement((current) => current && moveKeyboardPlacement(current, { level }));
       return;
     }
+    if (toolsActive && isShiftedLetter(event, "t")) {
+      consume();
+      layout.toggleToolbar();
+      return;
+    }
+    if (legendKeysActive && layout.legendCollapsible && isShiftedLetter(event, "l")) {
+      consume();
+      layout.toggleLegend();
+      return;
+    }
+    if (toolsActive && layout.panelsResizable && isShiftedArrow(event, "up", "down")) {
+      consume();
+      layout.stepTopPanel(event.name === "up" ? 1 : -1);
+      return;
+    }
     if (isPlainKey(event, "[", "]") && (drawingKeysActive || legendKeysActive)) {
       consume();
       const direction = event.name === "[" ? -1 : 1;
@@ -579,6 +641,10 @@ export function useCompositeChartKeyboard({
       const date = keyboardCursorDateRef.current ?? scene?.dates.at(-1) ?? null;
       if (date) timePick?.onPick(date);
     },
+    pickPrice: () => {
+      const value = priceAtCursor();
+      if (value !== null) pricePick?.onPick(value);
+    },
     start: armedTool === "level" ? addLevelAtCursor : startKeyboardPlacement,
     finish: finishKeyboardPlacement,
     stepLevel,
@@ -596,6 +662,7 @@ export function useCompositeChartKeyboard({
     },
     leave: leaveChart,
     togglePin: () => pin?.toggle(),
+    layout,
   };
   const chartActionsRef = useRef(chartActions);
   chartActionsRef.current = chartActions;
@@ -608,17 +675,27 @@ export function useCompositeChartKeyboard({
   const armedHints = armedTool ? KEYBOARD_TOOL_HINTS[armedTool] : null;
   const placing = !!keyboardPlacement;
   const legendEntryVisible = !!legendEntry && visibleSeriesIds.has(legendEntry.id);
-  const resettable = !!activeUserViewport;
-  const timePickLabel = timePick?.label ?? null;
+  const resettable = !!activeUserViewport || scaledByHand;
+  const timePickLabel = timePick?.label ?? (levelHost ? pricePick?.label : null) ?? null;
+  const pickingPrice = !timePick && !!pricePick;
   const levelActionHint = selectedLevel?.actionable && levels?.action ? levels.action : null;
   const levelToolKeys = toolsActive && armedTool === "level" && levelsEditable;
-  const canDeleteLevel = toolsActive && levelsEditable && !!selectedLevel?.editable;
+  const canDeleteLevel = toolsActive && levelsEditable && !!selectedLevel?.editable && !selectedLevel.draggable;
   const pinState = pin ? pin.pinned : null;
+  // Hidden as it shows: a saved hidden bar is open while a tool is in hand.
+  const toolbarHidden = layout.toolbarHidden && armedTool === null;
+  const {
+    legendCollapsible,
+    legendCollapsed,
+    panelsResizable,
+    panelHeightsSet,
+    panelMaximized,
+  } = layout;
   usePaneFooter(keyboardId, () => {
     if (!keyboardActive || !scene) return null;
     const hints: PaneHint[] = [];
     if (timePickLabel) {
-      hints.push({ id: "chart-pick", key: "Enter", label: timePickLabel, onPress: () => chartActionsRef.current.pick() });
+      hints.push({ id: "chart-pick", key: "Enter", label: timePickLabel, onPress: () => pickingPrice ? chartActionsRef.current.pickPrice() : chartActionsRef.current.pick() });
     } else if (toolsActive && armedHints) {
       hints.push(placing
         ? { id: "chart-tool", key: "Enter", label: armedHints.finish, title: armedHints.finishTitle, onPress: () => chartActionsRef.current.finish() }
@@ -686,6 +763,29 @@ export function useCompositeChartKeyboard({
         });
       }
       if (resettable) menu.push({ id: "chart-reset", label: "Reset Zoom", accelerator: "0", onSelect: () => chartActionsRef.current.reset() });
+      menu.push({
+        id: "chart-toolbar",
+        label: toolbarHidden ? "Show Drawing Tools" : "Hide Drawing Tools",
+        accelerator: "Shift+T",
+        onSelect: () => chartActionsRef.current.layout.toggleToolbar(),
+      });
+      if (panelsResizable) {
+        menu.push({ id: "chart-panel-taller", label: "Taller Top Panel", accelerator: "Shift+Up", onSelect: () => chartActionsRef.current.layout.stepTopPanel(1) });
+        menu.push({ id: "chart-panel-shorter", label: "Shorter Top Panel", accelerator: "Shift+Down", onSelect: () => chartActionsRef.current.layout.stepTopPanel(-1) });
+      }
+      if (panelMaximized) {
+        menu.push({ id: "chart-panels-restore", label: "Show All Panels", onSelect: () => chartActionsRef.current.layout.restorePanels() });
+      } else if (panelHeightsSet) {
+        menu.push({ id: "chart-panels-reset", label: "Reset Panel Heights", onSelect: () => chartActionsRef.current.layout.resetPanelHeights() });
+      }
+    }
+    if (legendKeysActive && legendCollapsible) {
+      menu.push({
+        id: "chart-legend",
+        label: legendCollapsed ? "Expand Legend" : "Collapse Legend",
+        accelerator: "Shift+L",
+        onSelect: () => chartActionsRef.current.layout.toggleLegend(),
+      });
     }
     if (legendKeysActive && anyLegendToggleable && !drawingKeysActive) {
       menu.push({ id: "chart-series-next", label: "Next Series", accelerator: "]", onSelect: () => chartActionsRef.current.stepLegend(1) });
@@ -706,6 +806,7 @@ export function useCompositeChartKeyboard({
     !!scene,
     selectedDrawingId,
     timePickLabel,
+    pickingPrice,
     levelActionHint,
     levelToolKeys,
     levelItems.length,
@@ -713,6 +814,12 @@ export function useCompositeChartKeyboard({
     levelsEditable,
     toolsActive,
     pinState,
+    toolbarHidden,
+    legendCollapsible,
+    legendCollapsed,
+    panelsResizable,
+    panelHeightsSet,
+    panelMaximized,
   ]);
 
   return {