@pradeepjadhav/trading-reload-chart 1.0.3 → 1.1.0

package/README.md

@@ -18,7 +18,7 @@ For architecture, conventions, and agent guidelines, see [AGENTS.md](./AGENTS.md
 
 ## Quick start (local development)
 
-1. **Clone and install**
+### 1. Clone and install
 
 ```bash
 git clone <repository-url>
@@ -26,7 +26,9 @@ cd trading-reload-chart
 npm install
 ```
 
-2. **Run the demo** (hot reload, port **8999** by default)
+### 2. Run the demo
+
+Hot reload, port **8999** by default.
 
 ```bash
 npm run dev
@@ -34,12 +36,12 @@ npm run dev
 
 Open the URL Vite prints (typically `http://localhost:8999`). The demo mounts `TradingReload` with sample API/WebSocket wiring in `demo/`.
 
-3. **Optional checks**
+### 3. Optional checks
 
 ```bash
-npm run typecheck   # TypeScript
-npm run lint        # Biome
-npm run format      # Biome format
+npm run typecheck
+npm run lint
+npm run format
 ```
 
 ---
@@ -75,16 +77,111 @@ npm run preview
 
 ---
 
+## Publishing to npm
+
+### 1. Login to npm
+
+```bash
+npm login
+```
+
+Verify the active account:
+
+```bash
+npm whoami
+```
+
+The username should match the npm account that owns the package scope.
+
+### 2. Authenticate in your browser
+
+If npm prompts for browser-based authentication:
+
+1. Open the URL shown in the terminal.
+2. Sign in to npm.
+3. Complete the verification flow.
+4. Return to the terminal.
+
+Verify authentication:
+
+```bash
+npm whoami
+```
+
+### 3. Build the package
+
+```bash
+npm run build
+```
+
+### 4. Verify package contents
+
+```bash
+npm pack --dry-run
+```
+
+Ensure only the intended files are included.
+
+### 5. Publish
+
+For a public scoped package:
+
+```bash
+npm publish --access public
+```
+
+### Publishing a new version
+
+Update the version:
+
+```bash
+npm version patch
+```
+
+or
+
+```bash
+npm version minor
+```
+
+or
+
+```bash
+npm version major
+```
+
+Then publish:
+
+```bash
+npm publish --access public
+```
+
+### Useful commands
+
+Check the currently authenticated npm user:
+
+```bash
+npm whoami
+```
+
+View package information:
+
+```bash
+npm view @pradeepjadhav/trading-reload-chart
+```
+
+---
+
 ## Using the library in React / Next.js
 
 The chart is **client-only** (canvas + DOM). It does **not** support SSR.
 
 ### 1. Install the package
 
-**From npm** (after publish):
+**From npm**:
 
 ```bash
-npm install trading-reload-chart react react-dom
+npm install @pradeepjadhav/trading-reload-chart react react-dom
 ```
 
 **Directly from GitHub**:
@@ -99,6 +196,7 @@ npm install git+https://github.com/Pradeep17Jadhav/trading-reload-chart.git#main
 # In trading-reload-chart repo
 npm run build
 npm pack
+
 # In your app
 npm install /path/to/trading-reload-chart/trading-reload-chart-1.0.0.tgz
 ```
@@ -107,7 +205,7 @@ Or link during development:
 
 ```bash
 cd trading-reload-chart && npm run build && npm link
-cd your-app && npm link trading-reload-chart
+cd your-app && npm link @pradeepjadhav/trading-reload-chart
 ```
 
 ### 2. Next.js App Router
@@ -124,7 +222,7 @@ import {
   type Shape,
   type ShapeToolType,
   type OpenTrade,
-} from "trading-reload-chart";
+} from "@pradeepjadhav/trading-reload-chart";
 
 export function ChartPanel() {
   const [candles, setCandles] = useState<Candle[]>([]);
@@ -151,15 +249,17 @@ export function ChartPanel() {
 }
 ```
 
-- Give the parent a **defined height** (flex child, `h-full`, or fixed `min-height`). `TradingReload` fills **100%** of that container.
+- Give the parent a **defined height** (flex child, `h-full`, or fixed `min-height`).
+- `TradingReload` fills **100%** of that container.
 - Do **not** import chart CSS manually; styles ship with the component (`src/styles/chart.css`).
 
 ### 3. Vite / Create React App
 
-Same import; wrap the chart in a sized container:
-
 ```tsx
-import { TradingReload, type Candle } from "trading-reload-chart";
+import {
+  TradingReload,
+  type Candle,
+} from "@pradeepjadhav/trading-reload-chart";
 
 export function App() {
   return (
@@ -188,9 +288,23 @@ Import from the package root:
 | `ChartConfig`, `CHART_CONFIG`, `DeepPartial` | Configuration        |
 | `ClosedTradeIndicator`, trade handle types   | Trade overlay types  |
 
-Controlled props (parent owns state): `candles`, `liveCandle`, `openTrades`, `closedTrades`, `shapes`, `activeShapeTool`, `config`, `activeSymbol`.
+Controlled props (parent owns state):
+
+- `candles`
+- `liveCandle`
+- `openTrades`
+- `closedTrades`
+- `shapes`
+- `activeShapeTool`
+- `config`
+- `activeSymbol`
 
-Callbacks: `onShapeAdded`, `onShapeModified`, `onActiveShapeToolChange`, `onTradeModify`.
+Callbacks:
+
+- `onShapeAdded`
+- `onShapeModified`
+- `onActiveShapeToolChange`
+- `onTradeModify`
 
 See [AGENTS.md](./AGENTS.md) for the full props contract.
 
@@ -213,10 +327,10 @@ trading-reload-chart/
 │   └── styles/           # chart.css
 ├── dist/                 # Library build output
 ├── AGENTS.md
-└── vite.config.ts        # `dev` = demo; `build --mode library` = package
+└── vite.config.ts        # dev = demo; build --mode library = package
 ```
 
-Type declarations live in **`*.types.ts`** files next to implementation code (see AGENTS.md).
+Type declarations live in `*.types.ts` files next to implementation code (see AGENTS.md).
 
 ---
 
@@ -251,6 +365,6 @@ Modern evergreen browsers with Canvas 2D (Chrome, Edge, Firefox, Safari).
 
 ## License
 
-Commercial, proprietary license. Use of this library requires a paid license,
-subscription, or other written authorization from Pradeep Jadhav. See
-[LICENSE](./LICENSE).
+Commercial, proprietary license. Use of this library requires a paid license, subscription, or other written authorization from Pradeep Jadhav.
+
+See [LICENSE](./LICENSE).

package/dist/canvas/layers/ShapesLayer/FibRetracementShape.d.ts

@@ -15,7 +15,7 @@ export declare class FibRetracementShape {
         converter: ShapeCoordinateConverter;
         config?: FibRetracementConfig;
     }): void;
-    static getHandles(shape: FibRetracementShapeData, converter: ShapeCoordinateConverter, config?: FibRetracementConfig): ShapeHandleHitbox[];
+    static getHandles(shape: FibRetracementShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
     static hitTest({ point, shape, converter, tolerance, config, }: {
         point: ShapePoint;
         shape: FibRetracementShapeData;

package/dist/canvas/layers/ShapesLayer/LineShape.d.ts

@@ -15,7 +15,7 @@ export declare class LineShape {
         converter: ShapeCoordinateConverter;
         config?: CommonShapeConfig;
     }): void;
-    static getHandles(shape: TrendlineShape, converter: ShapeCoordinateConverter, config?: CommonShapeConfig): ShapeHandleHitbox[];
+    static getHandles(shape: TrendlineShape, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
     static hitTest({ point, shape, converter, tolerance, }: {
         point: ShapePoint;
         shape: TrendlineShape;

package/dist/canvas/layers/ShapesLayer/PathShape.d.ts

@@ -16,7 +16,7 @@ export declare class PathShape {
         converter: ShapeCoordinateConverter;
         config?: CommonShapeConfig;
     }): void;
-    static getHandles(shape: PathShapeData, converter: ShapeCoordinateConverter, config?: CommonShapeConfig): ShapeHandleHitbox[];
+    static getHandles(shape: PathShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
     static hitTest({ point, shape, converter, tolerance, }: {
         point: ShapePoint;
         shape: PathShapeData;

package/dist/canvas/layers/ShapesLayer/RectangleShape.d.ts

@@ -15,7 +15,7 @@ export declare class RectangleShape {
         converter: ShapeCoordinateConverter;
         config?: RectangleShapeConfig;
     }): void;
-    static getHandles(shape: RectangleShapeData, converter: ShapeCoordinateConverter, config?: RectangleShapeConfig): ShapeHandleHitbox[];
+    static getHandles(shape: RectangleShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
     static hitTest({ point, shape, converter, tolerance, }: {
         point: ShapePoint;
         shape: RectangleShapeData;

package/dist/canvas/layers/ShapesLayer/ShapesLayer.constants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Fixed visual constants for shape drag handles.
+ * These are chart-internal rendering properties and are not user-configurable.
+ */
+export declare const SHAPE_HANDLE_CONFIG: {
+    readonly handleColor: "#0F0F0F";
+    readonly handleBorderColor: "#2962FF";
+    readonly handleBorderThickness: 1.5;
+    readonly handleRadius: 5;
+};

package/dist/canvas/layers/ShapesLayer/ShapesLayer.d.ts

@@ -15,9 +15,12 @@ export declare class ShapesLayer {
     handleHitboxes: ShapeHandleHitbox[];
     private draft;
     private dragState;
+    private lastTapTime;
+    private lastTapShapeId;
     private onShapeAdded?;
     private onShapeModified?;
     private onShapeSelected?;
+    private onShapeDoubleClicked?;
     private onToolChange?;
     constructor(options: ShapesLayerOptions);
     setCandles(candles: Candle[]): void;
@@ -29,9 +32,17 @@ export declare class ShapesLayer {
     render(): void;
     handlePointerEvent(event: PointerEvent | MouseEvent): boolean;
     handleKeyboardEvent(event: KeyboardEvent): boolean;
+    private getArrowKeyDelta;
     private handlePointerDown;
     private handlePointerMove;
     private handlePointerUp;
+    private handleDoubleClick;
+    /**
+     * Tracks touch taps and fires `onShapeDoubleClicked` on a double-tap.
+     * Only runs for touch pointer events; mouse/stylus use the `dblclick` DOM
+     * event path instead to avoid firing twice.
+     */
+    private checkTouchDoubleTap;
     private handleContextMenu;
     private handleToolPointerDown;
     private handleTwoPointDraft;

package/dist/canvas/layers/ShapesLayer/ShapesLayer.types.d.ts

@@ -72,10 +72,6 @@ export type ShapeLineStyle = "solid" | "dashed" | "dotted";
  *   lineColor: "#4ade80",
  *   lineOpacity: 1,
  *   lineStyle: "solid",
- *   handleColor: "#ffffff",
- *   handleBorderColor: "#111827",
- *   handleBorderThickness: 1,
- *   handleRadius: 4,
  * };
  * ```
  */
@@ -86,12 +82,6 @@ export type CommonShapeConfig = {
     lineStyle: ShapeLineStyle;
     fillColor?: string;
     fillOpacity?: number;
-    handleColor: string;
-    handleBorderColor: string;
-    handleBorderThickness: number;
-    handleRadius: number;
-    hoverLineWidth?: number;
-    selectedLineWidth?: number;
 };
 export type RectangleShapeConfig = CommonShapeConfig & {
     textColor: string;
@@ -112,12 +102,6 @@ export type FibRetracementConfig = {
     levels: FibLevelConfig[];
     fillColor?: string;
     fillOpacity?: number;
-    handleColor: string;
-    handleBorderColor: string;
-    handleBorderThickness: number;
-    handleRadius: number;
-    hoverLineWidth: number;
-    selectedLineWidth: number;
 };
 export type PositionShapeConfig = {
     defaultWidthCandles: number;
@@ -135,12 +119,6 @@ export type PositionShapeConfig = {
     midLineOpacity: number;
     midLineWidth: number;
     midLineStyle: ShapeLineStyle;
-    handleColor: string;
-    handleBorderColor: string;
-    handleBorderThickness: number;
-    handleRadius: number;
-    hoverLineWidth: number;
-    selectedLineWidth: number;
 };
 /**
  * Trendline shape defined by two vertices.
@@ -293,12 +271,12 @@ export type Shape = TrendlineShape | RectangleShapeData | PathShapeData | FibRet
  * @example
  * ```ts
  * const config: ShapeConfig = {
- *   trendline: { lineWidth: 2, lineColor: "#4ade80", lineOpacity: 1, lineStyle: "solid", handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4 },
- *   rectangle: { lineWidth: 2, lineColor: "#60a5fa", lineOpacity: 1, lineStyle: "solid", handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4, textColor: "#fff", textOpacity: 1, textFontFamily: "Arial", textFontSize: 12 },
- *   path: { lineWidth: 2, lineColor: "#f59e0b", lineOpacity: 1, lineStyle: "solid", handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4 },
- *   fibRetracement: { levels: [], handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4, hoverLineWidth: 3, selectedLineWidth: 3 },
- *   shortPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed", handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4, hoverLineWidth: 2, selectedLineWidth: 2 },
- *   longPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed", handleColor: "#fff", handleBorderColor: "#111827", handleBorderThickness: 1, handleRadius: 4, hoverLineWidth: 2, selectedLineWidth: 2 },
+ *   trendline: { lineWidth: 2, lineColor: "#4ade80", lineOpacity: 1, lineStyle: "solid" },
+ *   rectangle: { lineWidth: 2, lineColor: "#60a5fa", lineOpacity: 1, lineStyle: "solid", textColor: "#fff", textOpacity: 1, textFontFamily: "Arial", textFontSize: 12 },
+ *   path: { lineWidth: 2, lineColor: "#f59e0b", lineOpacity: 1, lineStyle: "solid" },
+ *   fibRetracement: { levels: [] },
+ *   shortPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed" },
+ *   longPosition: { defaultWidthCandles: 20, defaultStopLossPercent: 0.25, defaultRiskRewardRatio: 2, profitFillColor: "#16a34a", profitFillOpacity: 0.2, lossFillColor: "#dc2626", lossFillOpacity: 0.2, borderColor: "#fff", borderOpacity: 1, borderWidth: 1, borderStyle: "solid", midLineColor: "#fff", midLineOpacity: 0.8, midLineWidth: 1, midLineStyle: "dashed" },
  * };
  * ```
  */
@@ -462,6 +440,7 @@ export type ShapesLayerOptions = {
     onShapeAdded?: (payload: ShapeAddedPayload) => void;
     onShapeModified?: (payload: ShapeModifiedPayload) => void;
     onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
+    onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
     onToolChange?: (tool: ShapeToolType | null) => void;
 };
 export type InternalDragState = {

package/dist/canvas/layers/ShapesLayer/ShortLongPosition.d.ts

@@ -20,12 +20,11 @@ export declare class ShortLongPosition {
         config?: PositionShapeConfig;
     }): PositionShapeData;
     static getGeometry(shape: PositionShapeData, converter: ShapeCoordinateConverter): PositionGeometry;
-    static getHandles(shape: PositionShapeData, converter: ShapeCoordinateConverter, config?: PositionShapeConfig): ShapeHandleHitbox[];
-    static hitTest({ point, shape, converter, config, }: {
+    static getHandles(shape: PositionShapeData, converter: ShapeCoordinateConverter): ShapeHandleHitbox[];
+    static hitTest({ point, shape, converter, }: {
         point: ShapePoint;
         shape: PositionShapeData;
         converter: ShapeCoordinateConverter;
-        config?: PositionShapeConfig;
     }): boolean;
     static move(shape: PositionShapeData, delta: ShapeVertex): PositionShapeData;
     static resize({ shape, handleType, vertex, converter, }: {

package/dist/chart/ChartController.types.d.ts

@@ -193,6 +193,18 @@ export type ChartControllerProps = {
      * ```
      */
     onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
+    /**
+     * Called when the user double-clicks on a shape.
+     *
+     * Fires with the same payload as {@link onShapeSelected} but only on a
+     * double-click gesture. Does not affect shape selection state.
+     *
+     * @example
+     * ```ts
+     * onShapeDoubleClicked: (payload) => openShapeEditor(payload.shapeId)
+     * ```
+     */
+    onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
     /**
      * Called when the chart wants the parent to change the active drawing tool.
      *