react-native-vroom-chart 0.2.0 → 0.4.0

package/cpp/_core_src/drawings.cpp

@@ -5,10 +5,16 @@
 #include "include/core/SkCanvas.h"
 #include "include/core/SkColor.h"
 #include "include/core/SkPaint.h"
+#include "include/core/SkPath.h"
+#include "include/core/SkPathBuilder.h"
 #include "include/core/SkPoint.h"
 #include "include/core/SkRect.h"
 #pragma clang diagnostic pop
 
+#include <algorithm>
+#include <array>
+#include <cmath>
+
 #include "chart.h"
 
 namespace vroom::drawings {
@@ -31,18 +37,176 @@ SkPoint to_px(const VroomChart& chart, const Layout& lay, const PriceBounds& bou
     return SkPoint{x, y};
 }
 
-void draw_node(SkCanvas* canvas, SkPoint pt) {
+// The four corners of the box with opposite corners `a` and `b`, in the fixed
+// order used by hit-test `part` indices: a, (b.x,a.y), b, (a.x,b.y). Corner k's
+// diagonal is corner (k+2)%4.
+std::array<SkPoint, 4> box_corners(SkPoint a, SkPoint b) {
+    return {SkPoint{a.fX, a.fY}, SkPoint{b.fX, a.fY}, SkPoint{b.fX, b.fY},
+            SkPoint{a.fX, b.fY}};
+}
+
+// The normalized (L,T,R,B) rectangle spanning opposite corners `a` and `b`.
+SkRect box_rect(SkPoint a, SkPoint b) {
+    return SkRect::MakeLTRB(std::min(a.fX, b.fX), std::min(a.fY, b.fY),
+                            std::max(a.fX, b.fX), std::max(a.fY, b.fY));
+}
+
+// Strokes the box outline and paints a faint fill (~10% of the border alpha) of
+// the same color, spanning opposite corners `a` and `b`.
+void draw_box(SkCanvas* canvas, SkPoint a, SkPoint b, SkColor color, float width) {
+    const SkRect r = box_rect(a, b);
+
+    SkPaint fill;
+    fill.setAntiAlias(true);
+    fill.setStyle(SkPaint::kFill_Style);
+    // Faint fill: 10% of the border's alpha, same RGB.
+    const U8CPU fill_alpha = static_cast<U8CPU>(SkColorGetA(color) * 0.1f);
+    fill.setColor(SkColorSetA(color, fill_alpha));
+    canvas->drawRect(r, fill);
+
+    SkPaint border;
+    border.setAntiAlias(true);
+    border.setColor(color);
+    border.setStyle(SkPaint::kStroke_Style);
+    border.setStrokeWidth(width > 0.f ? width : 2.f);
+    canvas->drawRect(r, border);
+}
+
+// Strokes a freehand path through `pts` (data space). The polyline is smoothed
+// with quadratic curves through segment midpoints — each captured point becomes
+// a control point, so the stroke reads as one organic curve instead of a chain
+// of visible corners. Round caps/joins give it a pen-like feel.
+void draw_path(SkCanvas* canvas, const VroomChart& chart, const Layout& lay,
+               const PriceBounds& bounds, int64_t window_ms,
+               const std::vector<VroomDrawPoint>& pts, SkColor color,
+               float width) {
+    if (pts.empty()) return;
+    const float w = width > 0.f ? width : 2.f;
+
+    SkPaint paint;
+    paint.setAntiAlias(true);
+    paint.setColor(color);
+
+    // A stroke that's still a single sample renders as a dot, so pressing down
+    // gives immediate feedback before the pointer moves.
+    if (pts.size() == 1) {
+        const SkPoint p = to_px(chart, lay, bounds, window_ms, pts[0]);
+        paint.setStyle(SkPaint::kFill_Style);
+        canvas->drawCircle(p.fX, p.fY, w * 0.5f, paint);
+        return;
+    }
+
+    SkPathBuilder builder;
+    builder.moveTo(to_px(chart, lay, bounds, window_ms, pts[0]));
+    // Curve through every interior point, ending each quad at the midpoint of
+    // the next segment; finish with a straight run to the final sample.
+    for (size_t i = 1; i + 1 < pts.size(); ++i) {
+        const SkPoint cur = to_px(chart, lay, bounds, window_ms, pts[i]);
+        const SkPoint next = to_px(chart, lay, bounds, window_ms, pts[i + 1]);
+        builder.quadTo(cur, SkPoint{(cur.fX + next.fX) * 0.5f,
+                                    (cur.fY + next.fY) * 0.5f});
+    }
+    builder.lineTo(to_px(chart, lay, bounds, window_ms, pts.back()));
+
+    paint.setStyle(SkPaint::kStroke_Style);
+    paint.setStrokeWidth(w);
+    paint.setStrokeCap(SkPaint::kRound_Cap);
+    paint.setStrokeJoin(SkPaint::kRound_Join);
+    canvas->drawPath(builder.detach(), paint);
+}
+
+void draw_node(SkCanvas* canvas, SkPoint pt, float scale = 1.f) {
     SkPaint fill;
     fill.setAntiAlias(true);
     fill.setColor(kNodeFill);
-    canvas->drawCircle(pt.fX, pt.fY, kNodeFillRadius, fill);
+    canvas->drawCircle(pt.fX, pt.fY, kNodeFillRadius * scale, fill);
 
     SkPaint border;
     border.setAntiAlias(true);
     border.setColor(kNodeBorder);
     border.setStyle(SkPaint::kStroke_Style);
     border.setStrokeWidth(kNodeBorderWidth);
-    canvas->drawCircle(pt.fX, pt.fY, kNodeRingRadius, border);
+    canvas->drawCircle(pt.fX, pt.fY, kNodeRingRadius * scale, border);
+}
+
+// Clamped projection parameter (0..1) of point (px,py) onto segment
+// (ax,ay)-(bx,by): 0 at A, 1 at B.
+float segment_t(float px, float py, float ax, float ay, float bx, float by) {
+    const float dx = bx - ax;
+    const float dy = by - ay;
+    const float len2 = dx * dx + dy * dy;
+    const float t = len2 > 0.f ? ((px - ax) * dx + (py - ay) * dy) / len2 : 0.f;
+    return std::clamp(t, 0.f, 1.f);
+}
+
+// Shortest distance from point (px,py) to segment (ax,ay)-(bx,by), in px.
+float dist_to_segment(float px, float py, float ax, float ay, float bx, float by) {
+    const float t = segment_t(px, py, ax, ay, bx, by);
+    const float cx = ax + t * (bx - ax);
+    const float cy = ay + t * (by - ay);
+    const float ex = px - cx;
+    const float ey = py - cy;
+    return std::sqrt(ex * ex + ey * ey);
+}
+
+// True when (px,py) is inside the box (the grabbable fill area).
+bool point_in_rect(float px, float py, SkPoint a, SkPoint b) {
+    const SkRect r = box_rect(a, b);
+    return px >= r.fLeft && px <= r.fRight && py >= r.fTop && py <= r.fBottom;
+}
+
+// Shortest distance from (px,py) to the freehand polyline through `pts`, in px.
+// Cheap bounding-box reject first (a stroke can hold many points and most
+// hit-tests miss), then distance-to-segment across consecutive samples — the
+// same two-stage approach Excalidraw uses for its freedraw elements. Returns a
+// value greater than `tol` on a clear miss.
+float dist_to_path(float px, float py, const VroomChart& chart, const Layout& lay,
+                   const PriceBounds& bounds, int64_t window_ms,
+                   const std::vector<VroomDrawPoint>& pts, float tol) {
+    const float kMiss = tol + 1.f;
+    if (pts.size() < 2) return kMiss;
+
+    float min_x = 0.f, max_x = 0.f, min_y = 0.f, max_y = 0.f;
+    for (size_t i = 0; i < pts.size(); ++i) {
+        const SkPoint p = to_px(chart, lay, bounds, window_ms, pts[i]);
+        if (i == 0) {
+            min_x = max_x = p.fX;
+            min_y = max_y = p.fY;
+        } else {
+            min_x = std::min(min_x, p.fX);
+            max_x = std::max(max_x, p.fX);
+            min_y = std::min(min_y, p.fY);
+            max_y = std::max(max_y, p.fY);
+        }
+    }
+    if (px < min_x - tol || px > max_x + tol || py < min_y - tol ||
+        py > max_y + tol) {
+        return kMiss;
+    }
+
+    float best = kMiss;
+    SkPoint prev = to_px(chart, lay, bounds, window_ms, pts[0]);
+    for (size_t i = 1; i < pts.size(); ++i) {
+        const SkPoint cur = to_px(chart, lay, bounds, window_ms, pts[i]);
+        best = std::min(best,
+                        dist_to_segment(px, py, prev.fX, prev.fY, cur.fX, cur.fY));
+        prev = cur;
+    }
+    return best;
+}
+
+// Shortest distance from (px,py) to the box's four edges, in px (0 when on an
+// edge). Used so the border is grabbable even outside the fill's tolerance.
+float dist_to_rect_edges(float px, float py, SkPoint a, SkPoint b) {
+    const auto c = box_corners(a, b);
+    float best = dist_to_segment(px, py, c[0].fX, c[0].fY, c[1].fX, c[1].fY);
+    for (int i = 1; i < 4; ++i) {
+        const SkPoint& p0 = c[i];
+        const SkPoint& p1 = c[(i + 1) % 4];
+        best = std::min(best,
+                        dist_to_segment(px, py, p0.fX, p0.fY, p1.fX, p1.fY));
+    }
+    return best;
 }
 }  // namespace
 
@@ -62,9 +226,18 @@ void draw(SkCanvas* canvas,
     if (!chart.drawings.empty()) {
         canvas->save();
         canvas->clipRect(clip);
-        for (const VroomDrawing& d : chart.drawings) {
+        for (const auto& d : chart.drawings) {
+            if (d.kind == 2) {
+                draw_path(canvas, chart, lay, bounds, window_ms, d.points,
+                          static_cast<SkColor>(d.color), d.width);
+                continue;
+            }
             const SkPoint a = to_px(chart, lay, bounds, window_ms, d.a);
             const SkPoint b = to_px(chart, lay, bounds, window_ms, d.b);
+            if (d.kind == 1) {
+                draw_box(canvas, a, b, static_cast<SkColor>(d.color), d.width);
+                continue;
+            }
             SkPaint line;
             line.setAntiAlias(true);
             line.setColor(static_cast<SkColor>(d.color));
@@ -75,34 +248,159 @@ void draw(SkCanvas* canvas,
         canvas->restore();
     }
 
+    // 1b. Handles on the selected committed drawing (unclipped, like the draft's
+    //     dots). The grabbed endpoint renders 50% larger.
+    if (chart.selected_drawing >= 0 &&
+        static_cast<size_t>(chart.selected_drawing) < chart.drawings.size()) {
+        const auto& d = chart.drawings[chart.selected_drawing];
+        const SkPoint sa = to_px(chart, lay, bounds, window_ms, d.a);
+        const SkPoint sb = to_px(chart, lay, bounds, window_ms, d.b);
+        if (d.kind == 2) {
+            // Pencil: anchors on the first/last point are a visual cue that the
+            // stroke is movable — they aren't grab handles, so never enlarged.
+            draw_node(canvas, sa);
+            draw_node(canvas, sb);
+        } else if (d.kind == 1) {
+            // Four corner handles. The gesture layer stores the grabbed corner
+            // as endpoint `a` (its diagonal as `b`), so corner 0 is the active
+            // one while dragging.
+            const auto corners = box_corners(sa, sb);
+            for (int i = 0; i < 4; ++i) {
+                draw_node(canvas, corners[i],
+                          (chart.grabbed_endpoint == 0 && i == 0) ? 1.5f : 1.f);
+            }
+        } else {
+            draw_node(canvas, sa, chart.grabbed_endpoint == 0 ? 1.5f : 1.f);
+            draw_node(canvas, sb, chart.grabbed_endpoint == 1 ? 1.5f : 1.f);
+        }
+    }
+
     if (!chart.draft_active) return;
 
+    // 1c. Freehand stroke in progress: draw the live path, clipped like the
+    //     committed shapes. It grows a point at a time via append_draft_point.
+    if (chart.draft_kind == 2) {
+        if (chart.draft_points.empty()) return;
+        canvas->save();
+        canvas->clipRect(clip);
+        draw_path(canvas, chart, lay, bounds, window_ms, chart.draft_points,
+                  static_cast<SkColor>(chart.draft_color), chart.draft_width);
+        canvas->restore();
+        return;
+    }
+
     const SkPoint a = to_px(chart, lay, bounds, window_ms, chart.draft_a);
     const bool has_b = chart.draft_has_b;
     const SkPoint b =
         has_b ? to_px(chart, lay, bounds, window_ms, chart.draft_b) : a;
 
-    // 2. Guideline preview (A->B), clipped to the candle area. Only while the
-    //    second point is still being placed (draft_guide); once committed, the
-    //    solid segment comes from chart.drawings instead.
+    // 2. Live preview (A->B), clipped to the candle area. Only while the second
+    //    point is still being placed (draft_guide); once committed, the solid
+    //    shape comes from chart.drawings instead. A box previews as a rectangle;
+    //    a line as a guideline.
     if (chart.draft_guide && has_b) {
         canvas->save();
         canvas->clipRect(clip);
-        SkPaint guide;
-        guide.setAntiAlias(true);
-        guide.setColor(static_cast<SkColor>(chart.draft_color));
-        guide.setStyle(SkPaint::kStroke_Style);
-        guide.setStrokeWidth(chart.draft_width > 0.f ? chart.draft_width : 2.f);
-        canvas->drawLine(a, b, guide);
+        if (chart.draft_kind == 1) {
+            draw_box(canvas, a, b, static_cast<SkColor>(chart.draft_color),
+                     chart.draft_width);
+        } else {
+            SkPaint guide;
+            guide.setAntiAlias(true);
+            guide.setColor(static_cast<SkColor>(chart.draft_color));
+            guide.setStyle(SkPaint::kStroke_Style);
+            guide.setStrokeWidth(chart.draft_width > 0.f ? chart.draft_width : 2.f);
+            canvas->drawLine(a, b, guide);
+        }
         canvas->restore();
     }
 
     // 3. Node dots on top (not clipped, so an edge dot still renders fully).
     //    While guiding (placing the second point) only the anchor dot shows; the
-    //    moving end is conveyed by the guideline. Once selected (committed) both
-    //    endpoints show dots.
+    //    moving end is conveyed by the preview shape. Once selected (committed)
+    //    both endpoints show dots.
     draw_node(canvas, a);
     if (has_b && !chart.draft_guide) draw_node(canvas, b);
 }
 
+HitResult hit_test(const VroomChart& chart,
+                   const Layout& lay,
+                   const PriceBounds& bounds,
+                   int64_t window_ms,
+                   float x,
+                   float y) {
+    HitResult miss{-1, -1, 0.f};
+    if (window_ms <= 0 || chart.drawings.empty()) return miss;
+
+    // Grab-priority: if a drawing is selected, its (visible) handles win first.
+    constexpr float kHandleHit = kNodeRingRadius + 6.f;
+    if (chart.selected_drawing >= 0 &&
+        static_cast<size_t>(chart.selected_drawing) < chart.drawings.size()) {
+        const auto& d = chart.drawings[chart.selected_drawing];
+        const SkPoint a = to_px(chart, lay, bounds, window_ms, d.a);
+        const SkPoint b = to_px(chart, lay, bounds, window_ms, d.b);
+        if (d.kind == 2) {
+            // Pencil has no grab handles — its anchors translate like any other
+            // part of the stroke, so fall through to the body pass.
+        } else if (d.kind == 1) {
+            // Box: four corner handles (part 0..3).
+            const auto corners = box_corners(a, b);
+            for (int c = 0; c < 4; ++c) {
+                if (std::hypot(x - corners[c].fX, y - corners[c].fY) <= kHandleHit)
+                    return HitResult{chart.selected_drawing, c, 0.f};
+            }
+        } else {
+            if (std::hypot(x - a.fX, y - a.fY) <= kHandleHit)
+                return HitResult{chart.selected_drawing, 0, 0.f};
+            if (std::hypot(x - b.fX, y - b.fY) <= kHandleHit)
+                return HitResult{chart.selected_drawing, 1, 1.f};
+        }
+    }
+
+    // Otherwise the nearest drawing body within tolerance (topmost = last drawn).
+    // Line body is distance-to-segment (part 2); box body is the interior (dist
+    // 0) or a nearby edge (part 4).
+    constexpr float kBodyHit = 6.f;
+    float best = kBodyHit;
+    int32_t best_i = -1;
+    int32_t best_part = 2;
+    float best_t = 0.f;
+    for (size_t i = 0; i < chart.drawings.size(); ++i) {
+        const auto& d = chart.drawings[i];
+        if (d.kind == 2) {
+            const float dist = dist_to_path(x, y, chart, lay, bounds, window_ms,
+                                            d.points, kBodyHit);
+            if (dist <= best) {  // <= so later (topmost) drawings win ties
+                best = dist;
+                best_i = static_cast<int32_t>(i);
+                best_part = 5;
+                best_t = 0.f;
+            }
+            continue;
+        }
+        const SkPoint a = to_px(chart, lay, bounds, window_ms, d.a);
+        const SkPoint b = to_px(chart, lay, bounds, window_ms, d.b);
+        if (d.kind == 1) {
+            const float dist = point_in_rect(x, y, a, b)
+                                   ? 0.f
+                                   : dist_to_rect_edges(x, y, a, b);
+            if (dist <= best) {  // <= so later (topmost) drawings win ties
+                best = dist;
+                best_i = static_cast<int32_t>(i);
+                best_part = 4;
+                best_t = 0.f;
+            }
+        } else {
+            const float dist = dist_to_segment(x, y, a.fX, a.fY, b.fX, b.fY);
+            if (dist <= best) {  // <= so later (topmost) drawings win ties
+                best = dist;
+                best_i = static_cast<int32_t>(i);
+                best_part = 2;
+                best_t = segment_t(x, y, a.fX, a.fY, b.fX, b.fY);
+            }
+        }
+    }
+    return best_i >= 0 ? HitResult{best_i, best_part, best_t} : miss;
+}
+
 }  // namespace vroom::drawings

package/cpp/_core_src/drawings.h

@@ -31,4 +31,27 @@ void draw(SkCanvas* canvas,
           float candle_right,
           float candle_area_h);
 
+// Result of a hit-test against the committed drawings. `index` is the drawing
+// index (or -1 for a miss). `part` depends on the drawing kind:
+//   * line   — 0 (endpoint A), 1 (endpoint B), or 2 (line body).
+//   * box    — 0..3 (the four corners, in the order returned by box_corners:
+//              a, (b.x,a.y), b, (a.x,b.y)) or 4 (box body: interior or edges).
+//   * pencil — always 5 (stroke body). A freehand stroke has no grab handles:
+//              its end anchors are a visual cue only and translate the whole
+//              path like any other part of it.
+// Corner/endpoint hits are only reported for the currently selected drawing
+// (whose handles are visible).
+struct HitResult {
+    int32_t index;
+    int32_t part;
+    float   t;  // 0..1 grab position along a line segment (A→B); 0 for box/handle hits
+};
+
+HitResult hit_test(const VroomChart& chart,
+                   const vroom::Layout& lay,
+                   const vroom::PriceBounds& bounds,
+                   int64_t window_ms,
+                   float x,
+                   float y);
+
 }  // namespace vroom::drawings

package/cpp/_core_src/ma_overlay.cpp

@@ -10,6 +10,7 @@
 #include "include/core/SkRect.h"
 #pragma clang diagnostic pop
 
+#include <algorithm>
 #include <cmath>
 
 #include "viewport.h"
@@ -29,11 +30,14 @@ void draw(SkCanvas* canvas,
           float candle_area_h,
           uint32_t color,
           float width,
-          const unsigned char* break_before) {
+          const unsigned char* break_before,
+          float opacity) {
     if (!canvas || !values_visible || n == 0 || candle_right <= 0.f ||
         candle_area_h <= 0.f) {
         return;
     }
+    opacity = std::clamp(opacity, 0.f, 1.f);
+    if (opacity <= 0.f) return;
 
     // SkPathBuilder (not SkPath's edit methods, removed in newer Skia tips).
     SkPathBuilder path;
@@ -59,6 +63,10 @@ void draw(SkCanvas* canvas,
     SkPaint line;
     line.setAntiAlias(true);
     line.setColor(static_cast<SkColor>(color));
+    // Fade the line in during the candle→line morph (multiplies the color alpha).
+    if (opacity < 1.f) {
+        line.setAlphaf(line.getAlphaf() * opacity);
+    }
     line.setStyle(SkPaint::kStroke_Style);
     line.setStrokeWidth(width > 0.f ? width : 1.5f);
 

package/cpp/_core_src/ma_overlay.h

@@ -37,6 +37,7 @@ void draw(SkCanvas* canvas,
           float candle_area_h,
           uint32_t color,
           float width,
-          const unsigned char* break_before = nullptr);
+          const unsigned char* break_before = nullptr,
+          float opacity = 1.f);
 
 }  // namespace vroom::ma_overlay

package/cpp/_core_src/theme.cpp

@@ -22,6 +22,7 @@ constexpr uint32_t kDefaultColors[VROOM_COLOR_COUNT_] = {
     0x00000000,  // WICK_BEAR   — transparent sentinel: inherit BEAR fill
     0xff26a69a,  // ACCENT_BULL — classic teal-green (price indicator, volume, MACD)
     0xffef5350,  // ACCENT_BEAR — classic red
+    0xffc9d1d9,  // LINE — line-chart close polyline; neutral foreground (AXIS_TEXT tone)
 };
 
 constexpr float kDefaultFloats[VROOM_FLOAT_COUNT_] = {
@@ -36,6 +37,7 @@ constexpr float kDefaultFloats[VROOM_FLOAT_COUNT_] = {
     0.f,    // CANDLE_RADIUS_PX — square by default
     0.f,    // WICK_ROUND_CAP — butt caps by default
     0.f,    // VOLUME_RADIUS_PX — square by default
+    1.5f,   // LINE_WIDTH_PX — line-chart polyline stroke width
 };
 
 }  // namespace

package/lib/index.d.mts

@@ -92,6 +92,10 @@ type VroomTheme = {
     crosshair?: VroomColor;
     /** Crosshair target — the hollow ring/dot at the intersection. */
     crosshairTarget?: VroomColor;
+    /** Line-chart-mode close polyline color. Defaults to a neutral foreground. */
+    lineColor?: VroomColor;
+    /** Line-chart-mode polyline stroke width in px. Defaults to 1.5. */
+    lineWidth?: number;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {
@@ -106,8 +110,15 @@ type VisibleRange = {
  *   'draw' — left-clicks place drawing points; panning/zooming are suppressed.
  */
 type ChartMode = 'pan' | 'draw';
+/**
+ * How the price series is drawn.
+ *   'candles' — default: candlestick bodies + wicks.
+ *   'line'    — a single polyline through each candle's close. Volume, indicators,
+ *               overlays, crosshair, and drawings still render.
+ */
+type ChartType = 'candles' | 'line';
 /** Active drawing tool while in `draw` mode. `null` draws nothing. */
-type DrawTool = null | 'line';
+type DrawTool = null | 'line' | 'box' | 'pencil';
 /** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
 type DrawPoint = {
     /** Anchor time as Unix epoch milliseconds (not snapped to a candle slot). */
@@ -115,23 +126,81 @@ type DrawPoint = {
     /** Anchor price. */
     price: number;
 };
-/**
- * A committed drawing. Pass an array of these via the `drawings` prop to render
- * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
- * each time the user finishes drawing. For now only the `'line'` (two-point
- * trendline) type exists.
- */
-type Drawing = {
+/** Fields shared by every drawing type. */
+type DrawingBase = {
     /** Stable unique id (the chart generates one for drawings it creates). */
     id: string;
-    type: 'line';
-    /** The two endpoints, in data space. */
-    points: [DrawPoint, DrawPoint];
-    /** Line color (hex string or packed ARGB number). Default solid blue. */
+    /** Stroke color (hex string or packed ARGB number). Default solid blue. */
     color?: VroomColor;
     /** Stroke width in px. Default 2. */
     width?: number;
 };
+/** A two-point trendline from `points[0]` to `points[1]`. */
+type LineDrawing = DrawingBase & {
+    type: 'line';
+    /** The two endpoints, in data space. */
+    points: [DrawPoint, DrawPoint];
+};
+/**
+ * An axis-aligned rectangle whose two opposite corners are `points[0]` and
+ * `points[1]` (the other two corners are derived).
+ */
+type BoxDrawing = DrawingBase & {
+    type: 'box';
+    /** Two opposite corners, in data space. */
+    points: [DrawPoint, DrawPoint];
+};
+/**
+ * A freehand pencil stroke: an open path through `points`, in order. Unlike the
+ * other tools a stroke has a variable number of points, and once committed it
+ * can only be translated — never reshaped.
+ */
+type PencilDrawing = DrawingBase & {
+    type: 'pencil';
+    /** The path's points in draw order (at least 2), in data space. */
+    points: DrawPoint[];
+};
+/**
+ * A committed drawing. Pass an array of these via the `drawings` prop to render
+ * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
+ * each time the user finishes drawing.
+ *
+ * This is a discriminated union on `type` — narrow on it before reading
+ * `points[1]`, since a `'pencil'` stroke has a variable-length array while
+ * `'line'` and `'box'` are always exactly two points.
+ */
+type Drawing = LineDrawing | BoxDrawing | PencilDrawing;
+/**
+ * Storage adapter for **managed** drawing persistence. Provide it via the
+ * `drawingStore` prop and the chart owns the drawings array itself — loading and
+ * saving through this adapter instead of you wiring the controlled `drawings`
+ * prop + `onDrawing*` callbacks.
+ *
+ * The adapter is an **opaque string key-value store** — the chart serializes
+ * drawings into a **versioned envelope** (`{ v, drawings }`) and hands you the
+ * string; you just persist bytes. Because the library owns the schema and
+ * migrates old payloads on load, adding drawing tools or persisted fields later
+ * never changes this interface — your adapter is written once.
+ *
+ * `marketId` is the chart's `seriesKey`, so drawings are bucketed per market:
+ * they persist across timeframe changes (same key) but not across markets. Both
+ * methods may be async (localStorage is sync; AsyncStorage / MMKV / a REST
+ * backend are async). The chart debounces `save`. Consumers that only handle a
+ * single market can ignore `marketId`.
+ */
+type DrawingStore = {
+    /**
+     * Return the raw string previously handed to `save` for `marketId`, or
+     * `null`/`undefined`/`''` if nothing is stored. Sync or async.
+     */
+    load: (marketId: string) => string | null | undefined | Promise<string | null | undefined>;
+    /**
+     * Persist the opaque `data` string for `marketId`. Sync or async; the chart
+     * debounces calls. The string is a versioned envelope owned by the library —
+     * store it verbatim, don't parse or reshape it.
+     */
+    save: (marketId: string, data: string) => void | Promise<void>;
+};
 /** RSI indicator config. Rendered in a pane below the candles when enabled. */
 type RSIConfig = {
     enabled?: boolean;
@@ -265,6 +334,18 @@ type VroomChartCoreProps = {
      * devices of different widths.
      */
     defaultCandleWidth?: number;
+    /**
+     * Price-series render style. `'candles'` (default) draws candlesticks;
+     * `'line'` draws a polyline through each candle's close (style it with
+     * `theme.lineColor` / `theme.lineWidth`). All other layers are unaffected.
+     */
+    chartType?: ChartType;
+    /**
+     * Duration (ms) of the animated candle↔line transition when `chartType`
+     * changes. Default ~300. `0` snaps instantly. Ignored (snaps) when the OS
+     * requests reduced motion, which instead uses a plain cross-fade.
+     */
+    transitionMs?: number;
     theme?: VroomTheme;
     /** RSI indicator (pane below the candles). Omit/disable to hide it. */
     rsi?: RSIConfig;
@@ -306,10 +387,30 @@ type VroomChartCoreProps = {
      * Committed drawings to render, anchored to data so they track the candles on
      * pan/zoom. This is a controlled prop: append the value the chart hands you in
      * `onDrawingComplete` to persist it.
+     *
+     * Ignored when `drawingStore` is set (the chart then owns the array itself).
      */
     drawings?: Drawing[];
+    /**
+     * Opt into **managed** drawing persistence: the chart owns the drawings array
+     * internally and loads/saves it through this adapter, keyed by `seriesKey`.
+     * When set, `drawings` and the `onDrawing*` callbacks are ignored. Web only.
+     * Requires `seriesKey` — without one, drawings work in-session but aren't saved.
+     */
+    drawingStore?: DrawingStore;
     /** Fired with the finished drawing when the user completes one. */
     onDrawingComplete?: (drawing: Drawing) => void;
+    /**
+     * Fired after the user drags a selected line's endpoint handle. The payload is
+     * the same drawing (same `id`) with updated `points`; apply it to your
+     * controlled `drawings` state (replace by id). Web only.
+     */
+    onDrawingChange?: (drawing: Drawing) => void;
+    /**
+     * Fired when the user deletes the selected line (Backspace/Delete). Remove the
+     * drawing with this `id` from your controlled `drawings` state. Web only.
+     */
+    onDrawingDelete?: (id: string) => void;
     /**
      * Fired when the chart wants the mode changed — e.g. it requests `'pan'` after
      * the user clicks away from a just-drawn line. Since `mode` is controlled, the
@@ -349,4 +450,4 @@ declare global {
  */
 declare function VroomChart(props: VroomChartProps): React.JSX.Element;
 
-export { type Candle, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };
+export { type Candle, type ChartType, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };